Html
    Css
    Js

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

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

svg时间显示牌

更新时间:2020-02-03 22:05:43

原生js获取本地时间信息,css3 svg实现动态霓虹灯文字时钟特效。

0