通过 animation 配合伪元素搭配 content 属性来实现字符变换，实现一段字符不停更换。

适用于网页异常状态等场景应用。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码
html 代码
<div class=”font25″>The Bug!</div>
1.
一个 div 标签，div 内文字元素为英文字符最好。

css 部分代码
.font25{
position: relative;
font-size: 24px;
font-weight: 900;
color: #1630f1;
letter-spacing: 10px;
background-color: #ffffff;
}
.font25:after{
content: ”;
position: absolute;
top: 0;
z-index: 10;
background-color: inherit; /* 继承背景色使伪元素遮挡住后面 */
animation: text-ani25 2.4s linear infinite;
animation-delay: 2s;
}
@keyframes text-ani25{
0%{
content: “$-“;
left: 0;
}
5%{
content: “;y”;
left: 0;
}
10%{
content: “*&#H”;
left: 0;
}
15%{
content: “-!);”;
left: 0;
}
20%{
content: “#$_}-‘”;
left: 0;
}
25%{
content: “:0^!$.”;
left: 0;
}
30%{
content: “#{+.-?#u”;
left: 0;
}
35%{
content: “f7*%}-;#”;
left: 0;
}
40%{
content: “^=’?’*$!”;
left: 0;
}
45%{
content: “+0^&!`^-“;
left: 0;
}
50%{
content: “&-?>-=|`”;
left: 0;
}
55%{
content: “u<|:#-“;
left: auto;
right: 0;
}
60%{
content: “;~0![,”;
left: auto;
right: 0;
}
65%{
content: “)+->”;
left: auto;
right: 0;
}
70%{
content: “+.=d”;
left: auto;
right: 0;
}
75%{
content: “&%”;
left: auto;
right: 0;
}
80%{
content: “`@”;
left: auto;
right: 0;
}
85%{
content: “-“;
left: auto;
right: 0;
}
90%{
content: “#”;
left: auto;
right: 0;
}
95%{
content: “”;
left: 0;
}
100%{
content: “”;
left: 0;
}
}