1、交错动画
![](https://i-blog.csdnimg.cn/blog_migrate/a110ace77ddc8527ac1184d673ed7420.gif)
delay
)这一属性。
![](https://i-blog.csdnimg.cn/blog_migrate/e7cc13ee09a9e94fa99fe7b1a1042373.gif)
2、用JS分割文本
![](https://i-blog.csdnimg.cn/blog_migrate/50143006d577049f4d1e3049c03375ac.gif)
delay + Math.abs(i - middle) * step
,其中中间元素的下标
middle = letters.filter(e => e !== "").length / 2
![](https://i-blog.csdnimg.cn/blog_migrate/56239e3e9d5eb3e6782b73948de2bc17.gif)
3、随机粒子动画
![](https://i-blog.csdnimg.cn/blog_migrate/e26e8fda1a1a904c6c746176d3011505.jpeg)
伪类和伪元素
4、伪类
![](https://i-blog.csdnimg.cn/blog_migrate/e07a6db62f4930c205682e02a9768c67.gif)
:hover
来选中这一状态的按钮,并对其样式进行改变。
:hover
是笔者最最常用的一个伪类。还有一个很常用的伪类是
:nth-child
,用于选中元素的某一个子元素。其他的类似
:focus
、
:focus-within
等也有一定的使用。
5、绝对定位实现多重边框
padding
,我们可以给按钮做出3套大小不一的边框来,这样效果更炫了。
![](https://i-blog.csdnimg.cn/blog_migrate/f3dd1d064a5313ec45aee3289b8c31c9.gif)
6、伪元素
![](https://i-blog.csdnimg.cn/blog_migrate/895054ffa257724848d6f818cedcc613.gif)
::before
和
::after
这两个伪元素,也就是说每个元素都提供了3个矩形(元素本身1个,伪元素2个)来供我们进行形状的绘制。现在又有了
clip-path
这个属性,几乎任意的形状都可以被绘制出来,全凭你的想象力
7、attr()生成文本内容
data-*
attr()
用于获取元素的这种自定义属性值,并赋值给其伪元素的
content
作为其生成的内容
![](https://i-blog.csdnimg.cn/blog_migrate/9dd802fefe070a783b3ebb45835c2b9d.jpeg)
overflow: hidden
,把多余的文本遮住。通过JS分割文本并应用交错动画,就得到了如下的效果,这也是接下来本文要讲的
overflow
障眼法。
![](https://i-blog.csdnimg.cn/blog_migrate/077f587b2e02c099378336ecf5ae981a.gif)