* {
margin:0;
padding:0;
}
html,body {
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:rgb(2,2,73);
}
svg {
background:rgba(0,0,0,0.5);
}
text {
font-size:120px;
stroke:green;
stroke-width:5px;
/*stroke-dasharray 虚线的长度*/
stroke-dasharray:5;
}
.text1 {
stroke:red;
animation:text1 10s infinite;
}
.text2 {
stroke:yellow;
animation:text2 10s infinite;
}
.text3 {
stroke:blue;
animation:text3 10s infinite;
}
.text4 {
stroke:#ED05F9;
animation:text4 10s infinite;
}
.text5 {
stroke:#F98005;
animation:text5 10s infinite;
}
@keyframes text1 {
0% {
stroke-dasharray:20;
}
30% {
stroke-dasharray:150;
}
50% {
stroke-dasharray:220;
}
75% {
stroke-dasharray:150;
}
100% {
stroke-dasharray:20;
}
}@keyframes text2 {
0% {
stroke-dasharray:233;
}
30% {
stroke-dasharray:80;
}
50% {
stroke-dasharray:10;
}
75% {
stroke-dasharray:80;
}
100% {
stroke-dasharray:233;
}
}@keyframes text3 {
0% {
stroke-dasharray:10;
}
30% {
stroke-dasharray:30;
}
50% {
stroke-dasharray:183;
}
75% {
stroke-dasharray:63;
}
100% {
stroke-dasharray:10;
}
}@keyframes text4 {
0% {
stroke-dasharray:20;
}
30% {
stroke-dasharray:30;
}
50% {
stroke-dasharray:50;
}
75% {
stroke-dasharray:70;
}
100% {
stroke-dasharray:20;
}
}@keyframes text5 {
0% {
stroke-dasharray:20;
}
30% {
stroke-dasharray:90;
}
50% {
stroke-dasharray:160;
}
75% {
stroke-dasharray:50;
}
100% {
stroke-dasharray:20;
}
}更新时间:2021-01-26 22:57:55
根据 stroke-dasharray 虚线的长度制作动画