本篇内容主要讲解“web前端字体特效的实现方法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“web前端字体特效的实现方法是什么”吧!
划线动态：
背景高亮：
色块进出：
首先，利用::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);
}首先，利用::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);
}这和上一个“背景高亮”动画类似，不同的是色块的位置和大小变化方向不同。其余基本一致。
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);
}到此，相信大家对“web前端字体特效的实现方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：http://blog.itpub.net/69901074/viewspace-2652764/
