svg {
height:100%;
width:100%;
}
.words {
font-size:22vh;
font-weight:bold;
text-transform:uppercase;
fill:none;
stroke-width:4px;
stroke-dasharray:90,310;
animation-name:drawing;
animation-duration:8s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.words-1 {
stroke:deepskyblue;
text-shadow:0 0 50px deepskyblue;
animation-delay:-2s;
}
.words-2 {
stroke:lightseagreen;
text-shadow:0 0 50px lightseagreen;
animation-delay:-4s;
}
.words-3 {
stroke:orange;
text-shadow:0 0 50px orange;
animation-delay:-6s;
}
.words-4 {
stroke:purple;
text-shadow:0 0 50px purple;
animation-delay:-8s;
}
@keyframes drawing {
100% {
stroke-dashoffset:-400;
}
}更新时间:2020-02-03 22:05:43
原生js获取本地时间信息,css3 svg实现动态霓虹灯文字时钟特效。