Shulou(Shulou.com)06/02 Report--

本篇内容主要讲解"web前端字体特效的实现方法是什么"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"web前端字体特效的实现方法是什么"吧!

特效一览

划线动态：

背景高亮：

色块进出：

划线动态效果图

原理

首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。

其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。

最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到左变化的。这里是通过设置transform-origin属性来修改动画方向。下面的线条同理，方向相反即可。

注意：代码是通过scaleX来实现缩放，相比于设置width，会启用 GPU，避免重绘。

代码

html 代码：

xin-tan.com

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);}背景高亮效果图

原理

首先，利用::before伪元素就可以模拟出覆盖需要的色块。所以仅仅需要一个 dom 元素。这里伪元素的content元素必须给，否则不会显示（有些坑）。

其次，色块大小改变是通过scaleY来设置的，原因和第一个动画原因一样。

最后，伪元素的色块会覆盖 dom 上的元素。所以需要给 dom 元素设置z-index，并且让其生效并大于伪元素的z-index。

代码

html 代码：

xin-tan.com

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);}色块进出效果图

原理

这和上一个"背景高亮"动画类似，不同的是色块的位置和大小变化方向不同。其余基本一致。

代码

html:

xin-tan.com

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);}到此，相信大家对"web前端字体特效的实现方法是什么"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.