CSS动画设计专题（一）：字体特效

最新推荐文章于 2024-07-07 21:55:16 发布

心谭

最新推荐文章于 2024-07-07 21:55:16 发布

阅读量1.2k

点赞数

分类专栏： UI设计文章标签： UI CSS 前端动画

本文链接：https://blog.csdn.net/AsuraDong/article/details/97668061

版权

本文探讨CSS动画在字体特效中的应用，包括划线动态、背景高亮和色块进出效果。通过代码示例详细解析动画原理，帮助前端开发者掌握CSS动画技巧。

摘要由CSDN通过智能技术生成

本文来自《动画设计·字体特效》，更多文章放在了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

关注

专栏目录