前端媛猿
读完需要
8 分钟速读仅需 5 分钟
![eb2b216dc97b682c64950531438c112a.gif](https://i-blog.csdnimg.cn/blog_migrate/fabdb061d5e881d8c6a55e692f666489.gif)
作者:alphardex
https://juejin.im/post/5e070cd9f265da33f8653f0
前言
本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。1、交错动画
![5a57fe745a1727849323e0f648c64af7.gif](https://i-blog.csdnimg.cn/blog_migrate/e9c019a8f9076694855f8eb3f2e1228b.gif)
delay
)这一属性。 举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就是将延迟设为0.5秒),其他元素以此类推,这样它们就会错开来,形成一种独特的视觉效果。
![8a2d7d63de7df6c7d2cb100378980640.gif](https://i-blog.csdnimg.cn/blog_migrate/029e6925b0ea6b60f70c3d3dcec1875d.gif)
2、用JS分割文本
还有一种经常用到的玩法:用JS将句子或单词分割成字母,并给每个字母加上不同延时的动画,同样也很华丽。![1961aef2519f54fe167734d62ac193a4.gif](https://i-blog.csdnimg.cn/blog_migrate/5ef6c226ad1133b2098b346d69187c4f.gif)
delay + Math.abs(i - middle) * step
,其中中间元素的下标
middle = letters.filter(e => e !== "").length / 2
![696658953883daa7ee5f12a2f525e137.gif](https://i-blog.csdnimg.cn/blog_migrate/570fc694c0c0501c84f1884dc561bd64.gif)
3、随机粒子动画
说到随机性,我们可以实现一种更疯狂的效果:给几百个粒子添加交错动画,并且交错时间随机,位置大小也都是随机。如此一来我们就能用纯CSS模拟出下雪的效果。 又到了白色相簿的季节呢~为什么你写CSS这么熟练啊?![bd025cb2a24114e2a00d368f8ee2e3b5.png](https://i-blog.csdnimg.cn/blog_migrate/4fa9b9f12b26efbd0d8641832f705f89.jpeg)
伪类和伪元素
4、伪类
![b9d6c8e8f15751567bd60d48a0adf7a2.gif](https://i-blog.csdnimg.cn/blog_migrate/bdc8cd810e53569dc0555a0271c1582a.gif)
:hover
来选中这一状态的按钮,并对其样式进行改变。
:hover
是笔者最最常用的一个伪类。还有一个很常用的伪类是
:nth-child
,用于选中元素的某一个子元素。其他的类似
:focus
、