Html
    Css
    Js

    
                        
* {
	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;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

svg流光文字

更新时间:2021-01-26 22:57:55

根据 stroke-dasharray 虚线的长度制作动画

0