教育改变生活

标题: 一些CSS的常用套路(附demo的效果实现与源码）第二弹 [打印本页]

作者: 李玮 时间: 2020-8-25 17:46
标题: 一些CSS的常用套路(附demo的效果实现与源码）第二弹
1、伪元素

简而言之，伪元素就是在原先的元素基础上插入额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。我们知道每个元素都有::before和::after这两个伪元素，也就是说每个元素都提供了3个矩形（元素本身1个，伪元素2个）来供我们进行形状的绘制。现在又有了clip-path这个属性，几乎任意的形状都可以被绘制出来，全凭你的想象力上面的动图是条子划过文本的动画，条子就是每个文本所对应的伪元素，对每个文本和其伪元素应用动画，就能达到上图的效果了本demo地址：https://codepen.io/alphardex/pen/jOEOEzZ

2、attr()生成文本内容

元素可以有自定义的属性值，它的命名格式通常为data-*attr()用于获取元素的这种自定义属性值，并赋值给其伪元素的content作为其生成的内容利用这个函数，我们可以用伪元素在原先文本的基础上“复制”出另一个文本，如下图所示。

看上去有点乱糟糟的对吧？没事，给它加上overflow: hidden，把多余的文本遮住。通过JS分割文本并应用交错动画，就得到了如下的效果，这也是接下来本文要讲的overflow障眼法。

本demo地址：https://codepen.io/alphardex/full/wvBeXjd

3、overflow障眼法

之前有做过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。笔者就用渐变来模拟那道光，通过transform: translateX()将其平移至右边。

但这样明显不对啊，这光为啥能被看见呢？不应该把它给“挡”起来吗？于是乎，给按钮加上overflow: hidden，光在按钮外的位置时就被隐藏起来了。

这就是障眼法的力量,本demo地址：https://codepen.io/alphardex/pen/eYYzXBZ更多障眼法可以看看这个作品，一次性看个够XD

作者: 李玮 时间: 2020-8-26 17:19
太详细了！超喜欢这个系列！

欢迎光临教育改变生活 (http://bbs.goldoar.com/)