CSS - 随笔分类 - 完美前端

uniapp 初始化init

摘要：@charset "UTF-8";body,html,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td { margin: 0; padding: 0;}table { border-collapse: collapse; 阅读全文

posted @ 2024-09-13 18:39 完美前端阅读(128) 评论(0) 推荐(0)

css字体渐变加描边

摘要：定义css // 字体 - 渐变加描边 @mixin fontColor($backgroundImage, $textStroke, $filterDropShadow) { -webkit-text-stroke: $textStroke; // 描边 font-weight: 700; pos 阅读全文

posted @ 2024-06-10 19:07 完美前端阅读(122) 评论(0) 推荐(0)

css 启动页 loading动画

摘要：<div class="index-html-loader">  <div class="text">Loading...</div>  阅读全文

posted @ 2022-09-19 22:48 完美前端阅读(294) 评论(0) 推荐(0)

CSS3选择器nth-child(n)

摘要：#### CSS3 nth-child(n)选择器 /** * CSS3中的nth-child(n)选择器允许你选择父元素的特定子元素，基于它们的位置或它们与其他兄弟元素的关系。 * 可以用于选择列表、表格行、盒子等元素的特定顺序或模式。 */ /* 选择第3个LI元素 */ li:nth-chil 阅读全文

posted @ 2022-07-24 23:12 完美前端阅读(814) 评论(0) 推荐(0)

css overflow 可以滑动但不显示滚动条

摘要：.tab-lists-box{ scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-y: auto;}.tab-lists-box::-webkit-scrollbar { disp 阅读全文

posted @ 2022-03-04 18:19 完美前端阅读(1387) 评论(0) 推荐(0)

css3 多种奇特效果

摘要：参考网站 https://lhammer.cn/You-need-to-know-css/#/zh-cn/ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 通用样阅读全文

posted @ 2022-02-27 02:34 完美前端阅读(61) 评论(0) 推荐(0)

css3 跑马灯

摘要：#### 跑马灯动画效果 /* 使用@keyframes定义一个命名为marqueeAnimation的动画，使文本从右至左滚动 */ @keyframes marqueeAnimation { 0% { transform: translateX(100%); /* 起始状态，文本从容器的右边开始阅读全文

posted @ 2022-02-19 19:11 完美前端阅读(488) 评论(0) 推荐(0)

css html 移动端适配 font-size: 13.33vw rem + vw

摘要：#### 使用 `vw` 实现响应式布局方法一：使用CSS计算功能这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。 /* 根据750宽度的设计稿计算font-size，即1rem = 100px; */ html { font-size: calc(100vw / 阅读全文

posted @ 2021-10-27 21:26 完美前端阅读(1121) 评论(0) 推荐(0)

html css input自定义

摘要：完整的代码, 可以复制引用<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compa 阅读全文

posted @ 2021-10-27 15:59 完美前端阅读(334) 评论(0) 推荐(0)

css htm5 canvas时钟

摘要：完整的代码, 可以复制引用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="ht 阅读全文

posted @ 2021-10-26 23:03 完美前端阅读(57) 评论(0) 推荐(0)

js css 钟表

摘要：HTML 结构 <div id="wrap"> <ul id="list"> // 使用JavaScript动态生成时钟的刻度  </ul> <div id="hour"></div> <div id="min"></div> <di 阅读全文

posted @ 2021-10-26 23:01 完美前端阅读(74) 评论(0) 推荐(0)

css3 骰子

摘要：<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3D立方体动画</title> <style> /* 设置外部容器样式 */ .wrap{ w 阅读全文

posted @ 2021-10-26 23:00 完美前端阅读(121) 评论(0) 推荐(0)

css 字体

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 使用 @font-face 规则自定义字体 */ @font-face{ / 阅读全文

posted @ 2021-10-26 22:57 完美前端阅读(41) 评论(0) 推荐(0)

css 旋转动画

摘要：#### CSS3 动画实现旋转加载图标旋转加载动画样式 /* 定义一个类名为.uni-load-more__img的元素样式 */ .uni-load-more__img { /* 设置该元素的动画名称为loading-ios-H5，持续时间为1秒，延迟时间为0秒，动画计时函数为step-end 阅读全文

posted @ 2021-07-30 19:47 完美前端阅读(736) 评论(0) 推荐(0)

css 瀑布流

摘要：#### 瀑布流布局 CSS样式 /* 定义瀑布流的外层容器 */ .waterfall{ /* 设置外边距，单位为rpx */ margin: 0 20rpx; /* 定义两列布局 */ column-count: 2; /* 定义每一个瀑布流的子项样式 */ .waterfall-item { 阅读全文

posted @ 2021-07-13 14:04 完美前端阅读(98) 评论(0) 推荐(0)

CSS 变量教程

摘要：CSS 变量教程微软宣布 Edge 浏览器将支持 CSS 变量。这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F 阅读全文

posted @ 2021-07-08 14:16 完美前端阅读(149) 评论(0) 推荐(0)

css颜色逐渐过渡消失 linear-gradient

摘要：#### 渐变背景样式 CSS样式解释 /* 该样式定义了一个从上到下的线性渐变，从完全透明的黑色渐变到完全不透明的黑色 */ background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); /* 这是上述样式的阅读全文

posted @ 2021-06-14 18:04 完美前端阅读(1375) 评论(0) 推荐(0)

初始化css