本文来自《动画设计·字体特效》,更多文章放在了Github
欢迎交流和Star
特效一览
划线动态:
背景高亮:
色块进出:
划线动态
效果图
原理
首先,利用::after
和::before
就可以画出上下两条线,所以只需要一个 dom 元素即可。
其次,对于鼠标移入的动画,要给上面两个伪元素设置:hover
选择器。
最后是处理动画方向。我们以上面的线条为例,在鼠标移入的时候,是从右到左变化的。这里是通过设置transform-origin
属性来修改动画方向。下面的线条同理,方向相反即可。
注意:代码是通过scaleX
来实现缩放,相比于设置width
,会启用 GPU,避免重绘。
代码
html 代码:
<body>
<span>xin-tan.com</span>
</body>
css 代码:
span {
color: #595959;
position: relative;
z-index: 1;
}
span::before,
span::after {
content: "";
z-index: -1;
position