前言
这篇文章是我写CSS时经常使用的套路。 无论疗效如何华丽，都是一样的。
1. 隔行动画
有时，我们需要为多个元素添加相同的动画。 玩完之后不难发现，它们会一起移动，一起结束，这样就会变得很平常。
那么如何让动漫看起来更有趣呢？ 很简单，既然他们都同时开始动了，那么让他们同时不动不就好了吗？ 怎样才能让它们不同时动呢？ 请注意，CSS 动画具有延迟属性。
例如，如果有十个元素播放十个动画，则将第二个元素的动画播放时间设置为比第一个元素晚 0.5 秒（即设置延迟为 0.5 秒），其他元素将跟随此打个比方，它们都会交错排列，形成独特的视觉效果。
这就是所谓的隔行动画：通过设置不同的延迟时间，可以达到隔行动画的疗效。
本演示地址：
2.用JS分割文本
还有一种常用的方法：用JS将词组或词组分割成字母，给每个字母添加不同延迟的动画，也很华丽。
本演示地址：
一般来说，我们从第一个元素开始交错。 但如果要从中间元素开始交错，就需要给当前元素的延迟加上一个值。 该值是中间元素的下标到当前元素下标的距离（即下标之差的绝对值）和步长，即：delay + Math.abs(i - middle) *步骤，其中中间元素的下标 middle = letters.filter(e => e !== "").length / 2
本演示地址：
所有具有隔行功能的动漫都在这里
3.随机粒子动画
说到随机性，我们可以实现更疯狂的效果：给数百个粒子添加隔行动画，并且隔行的时间是随机的，位置和大小也是随机的。 这样我们就可以用纯CSS来模拟下雨的效果了。
又到了白色专辑季啦~CSS写得这么熟练干嘛？
本演示地址：
伪类和伪元素 4. 伪类
HTML 元素的状态可以动态更改。 例如，当您的键盘浮动在按钮上时，该按钮将处于“浮动”状态。 这时，我们可以使用伪类:hover来选择该状态下的按钮，并改变其样式。
:hover 是作者最常用的伪类。 另一个非常常用的伪类是：nth-child，它用于选择一个元素的子元素。 其他像:focus、:focus-within等也有一定程度的使用。
本演示地址：
5、绝对定位实现多边框
谁规定按钮只能有一组边框？ 利用绝对定位和padding，我们可以为按钮制作3组不同大小的边框，这样效果就更加炫丽了。
本演示地址：
6. 伪元素
简而言之，伪元素就是在原始元素的基础上插入一个额外的元素，并且这个元素并不充当HTML标签，以保持HTML结构的整洁。
我们知道每个元素都有两个伪元素::before和::after，也就是说每个元素提供了3个圆（1个元素本身，2个伪元素）供我们塑造轮廓。现在有了clip-path属性，几乎任何形状都可以勾勒出来，全凭你的想象力
上面的动画是条带经过文字的动画。 strip 是每个文本对应的伪元素。 对每个文本及其伪元素应用动画即可达到上图的效果
本演示地址：
7. attr()生成文本内容
元素可以有自定义的属性值，其命名格式一般为data-*
attr() 用于获取元素的这些自定义属性值，并给出其伪元素的内容作为生成内容
利用这个功能，我们可以利用伪元素在原始文本的基础上“复制”出另一个文本，如下图所示。
看起来有点乱，对吧？ 没关系，给它加上overflow:hidden来遮挡多余的文字。 通过JS对文本进行分割，并应用隔行动画，得到了如下的疗效，这也是下一篇要讲的溢出技巧。
本演示地址：
8. 溢出技巧
我之前做过闪光按钮的疗效：当鼠标悬浮在按钮上时，一盏灯从左向右闪烁。
作者使用渐变来模拟该光线，并通过transform：translateX()将其向右平移。
但这显然是错误的，为什么能看到这个光呢？ 难道不应该被“封杀”吗？
所以，给按钮添加overflow:hidden，灯光在按钮之外就会被隐藏。
这就是技巧的力量:)
本演示地址：
更多花样可以看看这部作品，一口气看完XD
9.兄弟选择器自定义表单元素
提示：最好将input作为label的子元素，这样当用户点击label时，可以传递给input
默认输入太帅怎么办？那就先擦掉，用appearance:none或者opacity:0
然后，使用兄弟选择器~对与输入相邻的所有元素进行排序（+号也可以，但只能选择最近的元素），例如可以使用伪元素生成一个新的框替换掉原来的输入，用 Pseudo-categories:checked 和动画来表示它的checked状态，本质上就是个trick~
本演示地址：
CSS 特性
充分利用CSS的各个功能也可以为你的工作增色不少
10.动画
这里包括过渡和变换
CSS动画可以说是用CSS设计炫丽特效最有力的工具，它几乎贯穿了我所有的作品
有人问我为什么能创作出这么多动漫？ 作者读过上百本书，熟悉常用的动画方法。 同样，只要仔细观察这些很酷的网站，它们也会给我带来很多设计灵感。
总之一句话：只有多享受动画，才能写出好的动画。
11. 边界半径
给包包添加圆角，常用于美化纽扣等部件
如果设置为50%的话就是一个矩形，这也是很常用的
不规则的弧形
调整多个顶点的border-radius可以做出不规则的弧形边缘形状
本演示地址：
12. 盒子阴影
给包包添加阴影，增加包包的立体效果，可以多层叠加，让阴影更加丝滑
本演示地址：
13. 面具
如果为 box-shadow 的扩展直径设置足够大的值，则可以使用它来遮挡背景，而无需额外的 div 元素
本演示地址：
14. 内发光
请注意，盒子阴影还有一个插图，用于在包内发光
利用这个功能，我们可以在包内设置一定范围内的颜色，制作出月牙形
添加一些动画和滤镜效果，《猩红之月》登场！
本演示地址：
文字阴影
文字阴影本质上和box-shadow是一样的，但是相对于文字来说，它常用于文字照明，也可以通过多层叠加来制作霓虹灯文字和伪3D文字
15. 发光文字
本演示地址：
16. 霓虹灯文字
本演示地址：
17. 伪3D文本
本演示地址：
18. 背景剪辑：文本
可以将背景切入文字的正面视图，常与color:transparent结合使用生成渐变文字
本演示地址：
坡度
渐变可以作为一种背景图像，具有很强的色调效果，甚至可以用来模拟光线
19. 线性渐变
线性渐变是我最常用的渐变
这项工作使用了 HTML 对话框标签、渐变背景、动画和溢出。 你仔细读过吗？ 
本演示地址：
20.径向渐变
径向渐变通常用于生成方形背景。 上例中Snow的背景是椭圆径向渐变
另外，由于背景是可以叠加的，所以我们可以叠加多个不同位置和大小的径向渐变来生成一组点，再加上动画形成粒子效果，无需多余的div元素。
本演示地址：
21. 圆锥梯度
圆锥形渐变可用于制作饼图
在饼图内部叠加一个伪元素，并将内容设置为某个值（这个值是由CSS变量估计的），就可以产生仪表的治疗效果，蒙眼方法再次完成了它的使命。
本演示地址：
筛选
PS中的滤镜，玩过的人都知道，模糊是最常用的
22. 背景滤镜
对背景应用滤镜以获得磨砂玻璃效果
本演示地址：
23. 混合混合模式
PS中的混合模式常用于背景文字的特效
下面使用screen模式实现文字视频锐化效果
本演示地址：
24. 剪辑路径
在PS中切割可以做出各种不规则的形状。 如果和动漫结合起来的话会很有趣。
本演示地址：
25.-webkit-box-reflect
投影的效果不是很常用，适合立体感较强的作品。
本演示地址：
26.网页动画
虽然这不是 CSS 功能，但它经常被用来做 CSS 不能做的事情
那么什么时候使用它呢？当CSS动画中存在无法从CSS获取的属性时，自然会使用它
跟踪键盘的位置
目前CSS没有获取键盘位置的API，所以考虑使用JS来做
通过查阅相关DOM API，发现在窃听键盘的API中，可以通过e.clientX和e.clientY获取键盘的当前位置
既然只能获取键盘的位置，那么追踪键盘的位置并不困难：通过监听mouseenter和mouseleave扰动，获取键盘进入和退出某个元素时的位置css3 颜色渐变，并得到这个坐标作为键盘的位移距离来监测mousemove扰动，获取键盘连接到元素时的位置，并以此坐标作为键盘的位移距离，从而达到跟踪的效果键盘就实现了。
本演示地址：
CSS胡迪尼
CSS Houdini是CSS的底层API，它可以让我们通过这套socket来扩展CSS的功能
让逐渐的改变
目前，直接对渐变进行动画处理很困难，因为浏览器不知道要更改什么类型的值
这时，我们可以使用 CSS.registerProperty() 来注册我们的自定义变量css3 颜色渐变，并将其语句类型（语法）声明为颜色类型，以便浏览器能够理解并对颜色进行插值以进行动画
还记得上面提到的圆柱梯度 conic-gradient() 吗？ 既然可以用来制作饼图，那么我们能否让饼图动起来呢？ 答案是肯定的，定义三个变量：--color1、--color2和--pos，其中--pos的句子类型是宽度比例，将其从0更改为100%，饼图将顺时针旋转。
利用绝对定位和级联上下文，我们可以将多个饼图从小到大叠加起来，然后为它们设置不同的颜色，应用隔行动画，就有下面华丽的效果了。
本演示地址：
27. 复活节彩蛋
谨慎的勇敢风格菜单，结合了交错的动漫和伪类元素
本演示地址：
终于：
恭喜您阅读本文。 无论你享受过视觉盛宴，学到很多东西，还是直接从书签导航到这里（笑），CSS的力量仍然超乎你的想象。 只要你有勇气去创造，你就是这个世界的神。
分享前端好文，缺个 在看
发表评论