**思路:**利用伪类重新生成同样的字体,且和原字体在竖直位置重合,在水平位置错开约2个px,利用动画使伪类的高度发生变化,同时利用一条直线跟随伪类高度的变化。
HTML代码
<div class="wrapper" data-word="hello world!">
hello world!
<div class="whiteLine"></div>
</div>
CSS样式
body{
background-color:darkseagreen;
margin: 0;
padding: 0;
}
.wrapper{
position: relative;
top: 300px;
left: 300px;
width:250px;
font-size: 40px;
line-height: 40px;
height:40px;
}
.wrapper::after{
content:attr(data-word);
font-size: 40px;
position: absolute;
top: 0;
left: -2px;
overflow: hidden;
animation:afterAnima 1.5s linear infinite;
}
@keyframes afterAnima {
0%{
height: 40px;
}
25%{
height:30px;
}
50%{
height: 20px;
}
100%{
height: 10px;
}
}
.wrapper::before{
content:attr(data-word);
font-size: 40px;
position: absolute;
top: 0;
left: -2px;
overflow: hidden;
animation:beforeAnima 1.5s linear infinite;
}
@keyframes beforeAnima {
0%{
height: 20px;
}
25%{
height:30px;
}
50%{
height: 40px;
}
100%{
height: 10px;
}
}
@keyframes whiteLineAnima {
0%{
bottom: -3px;
}
25%{
bottom:7px;
}
50%{
bottom: 17px;
}
100%{
bottom: 27px;
}
}
.whiteLine{
width:100%;
height: 2px;
background-color: darkseagreen;
position: absolute;
left:0;
bottom:-3px;
animation:whiteLineAnima 1s ease-out infinite ;
}