web前端动画专题（1）：字体特效
特效⼀览
划线动态：
背景⾼亮：
⾊块进出：
划线动态
效果图
原理
⾸先，利⽤::after和::before就可以画出上下两条线，所以只需要⼀个 dom 元素即可。
其次，对于⿏标移⼊的动画，要给上⾯两个伪元素设置:hover选择器。
最后是处理动画⽅向。我们以上⾯的线条为例，在⿏标移⼊的时候，是从右到左变化的。这⾥是通过设置transform-origin属性来修改动画⽅向。下⾯的线条同理，⽅向相反即可。
注意：代码是通过scaleX来实现缩放，相⽐于设置width，会启⽤ GPU，避免重绘。
代码
html 代码：
<body>
<span>xin-tan</span>
</body>
css 代码：
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);
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发⼯具，零基础，进阶视频教程，希望新⼿少⾛弯路
背景⾼亮
效果图
原理
⾸先，利⽤::before伪元素就可以模拟出覆盖需要的⾊块。所以仅仅需要⼀个 dom 元素。这⾥伪元素的content元素必须给，否则不会显⽰（有些坑）。
其次，⾊块⼤⼩改变是通过scaleY来设置的，原因和第⼀个动画原因⼀样。
最后，伪元素的⾊块会覆盖 dom 上的元素。所以需要给 dom 元素设置z-index，并且让其⽣效并⼤于伪元素的z-index。
代码
html 代码：
<span>xin-tan</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;
}css特效文字
span:hover::before {
transform: scaleY(1);
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发⼯具，零基础，进阶视频教程，希望新⼿少⾛弯路
⾊块进出
效果图
原理
这和上⼀个“背景⾼亮”动画类似，不同的是⾊块的位置和⼤⼩变化⽅向不同。其余基本⼀致。代码
html:
<body>
<span>xin-tan</span>
</body>
css:
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前端开发学习Q-q-u-n： 767273102 ，分享开发⼯具，零基础，进阶视频教程，希望新⼿少⾛弯路

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。