console
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.k1{
font-size:100px;
width:1000px;
height:500px;
fill:none;
stroke:red;
stroke-width:5px;
stroke-dasharray:500px;
animation:kuangsan1 5s 1s infinte;
} .k2{
font-size:100px;
width:1000px;
height:500px;
fill:none;
stroke:yell0w;
stroke-width:2px;
stroke-dasharray:100px;
animation:kuangsan2 5s 0.5s infinite;
} .k3{
font-size:100px;
width:1000px;
height:500px;
fill:none;
stroke:blue;
stroke-width:2px;
stroke-dasharray:5px;
animation:kuangsan3 5s infinite ;
}
@Keyframes kuangsan3
{
0%,100%{
stroke-dasharray:500px;
}
10%{
stroke-dasharray:50px;
}20%{
stroke-dasharray:150px;
}30%{
stroke-dasharray:200px;
}40%{
stroke-dasharray:250px;
}50%{
stroke-dasharray:300px;
}60%{
stroke-dasharray:350px;
}
70%{
stroke-dasharray:400px;
}80%{
stroke-dasharray:450px;
}90%{
stroke-dasharray:490px;
}
} @Keyframes kuangsan2
{
0%,100%{
stroke-dasharray:200px;
}
10%{
stroke-dasharray:250px;
}20%{
stroke-dasharray:350px;
}30%{
stroke-dasharray:390px;
}40%{
stroke-dasharray:4000px;
}50%{
stroke-dasharray:460px;
}60%{
stroke-dasharray:470px;
}
70%{
stroke-dasharray:480px;
}80%{
stroke-dasharray:490px;
}90%{
stroke-dasharray:500px;
}
} @Keyframes kuangsan1
{
0%,100%{
stroke-dasharray:10px;
}
10%{
stroke-dasharray:20px;
}20%{
stroke-dasharray:30px;
}30%{
stroke-dasharray:40px;
}40%{
stroke-dasharray:50px;
}50%{
stroke-dasharray:100px;
}60%{
stroke-dasharray:150px;
}
70%{
stroke-dasharray:200px;
}80%{
stroke-dasharray:350px;
}90%{
stroke-dasharray:4000px;
}
}
}
</style>
</head>
<body>
<svg width="900px"
height="900px">
<text x="200px" y="200px" class="k1" >时崎狂三
</text>
<text x="200px" y="200px" class="k2" >时崎狂三
</text>
<text x="200px" y="200px" class="k3" >时崎狂三
</text>
</rect>
</svg>
</body>
</html>