console
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:yellow;
}
svg{
background-color:#161823;
}
.text0{
stroke:#bce672;
font-size:100px;
stroke-width:2;
stroke-dasharray:2;
animation:load1 10s infinite;
}
.text1{
stroke:#ff461f;
font-size:100px;
stroke-width:2;
stroke-dasharray:2;
animation:load2 10s infinite;
}
.text2{
stroke:#ff461f;
font-size:100px;
stroke-width:2;
stroke-dasharray:2;
animation:load3 10s infinite;
}
.text3{
stroke:#70f3ff;
font-size:100px;
stroke-width:2;
stroke-dasharray:2;
animation:load4 10s infinite;
}
@keyframes load1{
0%,100%{
stroke-dasharray:150;
}
20%{
stroke-dasharray:300;
}
60%{stroke-dasharray:70;}
80%{stroke-dasharray:100;}
}
@keyframes load2{
0%,100%{
stroke-dasharray:500;
}
20%{
stroke-dasharray:20;
}
60%{stroke-dasharray:100;}
80%{stroke-dasharray:10;}
}
@keyframes load3{
0%,100%{
stroke-dasharray:18;
}
20%{
stroke-dasharray:220;
}
60%{stroke-dasharray:550;}
80%{stroke-dasharray:60;}
}
@keyframes load4{
0%,100%{
stroke-dasharray:99;
}
20%{
stroke-dasharray:60;
}
60%{stroke-dasharray:40;}
80%{stroke-dasharray:350;}
}
</style>
</head>
<body>
<svg width="500px" height="500px">
<text x="150" y="150" class="zi text0">朱笑仙</text>
<text x="150" y="150" class="zi text1">朱笑仙</text>
<text x="150" y="150" class="zi text2">朱笑仙</text>
<text x="150" y="150" class="zi text3">朱笑仙</text>
</svg>
</body>
</html>