本文来自《动画设计·字体特效》,更多文章放在了Github 欢迎交流和Star
特效一览
划线动态:
![188a1ea38f64b3c930aafb751c949d9c.gif](https://i-blog.csdnimg.cn/blog_migrate/45ad791c298522f09c77d31a79d44b34.gif)
背景高亮:
![b5b28452609130ead630daf1fc42029a.gif](https://i-blog.csdnimg.cn/blog_migrate/aa343cdaa1d49064497c19d63e107b6e.gif)
色块进出:
![99fccd3b21c5e85a83ff60c0409aa134.gif](https://i-blog.csdnimg.cn/blog_migrate/439f1b1fd87146b2dac596a8182bb6b0.gif)
划线动态
效果图
![188a1ea38f64b3c930aafb751c949d9c.gif](https://i-blog.csdnimg.cn/blog_migrate/45ad791c298522f09c77d31a79d44b34.gif)
原理
首先,利用::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: absolute;
left: 0;
right: 0;
height: 2px;
background: #262626;
transform: scaleX(0);
transition: transform 0.2s ease-in-out;
}
span::before {
top: 0;
transform-origin: center right;
}
span::after {
bottom: 0;
transform-origin: center left;
}
span:hover {
cursor: pointer;
}
span:hover::before {
transform-origin: center left;
transform: scaleX(1);
}
span:hover::after {
transform-origin: center right;
transform: scaleX(1);
}
背景高亮
效果图
![b5b28452609130ead630daf1fc42029a.gif](https://i-blog.csdnimg.cn/blog_migrate/aa343cdaa1d49064497c19d63e107b6e.gif)
原理
首先,利用::before
伪元素就可以模拟出覆盖需要的色块。所以仅仅需要一个 dom 元素。这里伪元素的content
元素必须给,否则不会显示(有些坑)。
其次,色块大小改变是通过scaleY
来设置的,原因和第一个动画原因一样。
最后,伪元素的色块会覆盖 dom 上的元素。所以需要给 dom 元素设置z-index
,并且让其生效并大于伪元素的z-index
。
代码
html 代码:
<body>
<span>xin-tan.com</span>
</body>
css 代码:
span {
color: #d9d9d9;
position: relative;
z-index: 1;
}
/*
1. content必须给
2. 用transform覆盖 配合 z-index
*/
span::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -0.25em;
right: -0.25em;
z-index: -1;
background: #262626;
transform: scaleY(0.2);
transform-origin: center bottom;
transition: all 0.1s linear;
}
span:hover {
cursor: pointer;
}
span:hover::before {
transform: scaleY(1);
}
色块进出
效果图
![99fccd3b21c5e85a83ff60c0409aa134.gif](https://i-blog.csdnimg.cn/blog_migrate/439f1b1fd87146b2dac596a8182bb6b0.gif)
原理
这和上一个“背景高亮”动画类似,不同的是色块的位置和大小变化方向不同。其余基本一致。
代码
html:
<body>
<span>xin-tan.com</span>
</body>
css:
span {
color: #d9d9d9;
position: relative;
z-index: 1;
}
span::before {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #262626;
transform-origin: center right;
transform: scaleX(0);
transition: transform 0.1s linear;
/* 这里不要指明为 all */
}
span:hover {
cursor: pointer;
}
span:hover::before {
transform-origin: center left;
transform: scaleX(1);
}
更多文章
- 动画设计·字体特效
- 动画设计·输入框特效
- 动画设计·按钮特效
- 动画设计·Loader特效·基础篇
- 动画设计·Loader特效·进阶篇