<div class="font25">The Bug!</div>
.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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.