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实现动态霓虹灯文字时钟特效。