這是一款代碼非常簡(jiǎn)潔的html5 svg模擬時(shí)鐘特效插件。該插件通過(guò)簡(jiǎn)單的SVG圖形來(lái)模擬時(shí)鐘輪廓，然后使用JS代碼讓時(shí)鐘動(dòng)起來(lái)。你想查看jQuery版本的數(shù)字電子時(shí)鐘的制作方法可以查看：使用JQUERY和CSS3制作逼真的數(shù)字時(shí)鐘效果。html5版本帶鬧鐘功能的數(shù)字電子時(shí)鐘可以查看：html5超逼真帶定時(shí)功能的電子數(shù)字時(shí)鐘。

HTML結(jié)構(gòu)

html結(jié)構(gòu)中使用SVG path來(lái)模擬時(shí)鐘的輪廓。

CSS樣式

插件中的CSS樣式只是簡(jiǎn)單的渲染時(shí)鐘的輪廓，給時(shí)針、分針和秒針添加不同的顏色。

html {

background: #0e2e3a;

}

svg {

position: absolute;

top: 10%;

width: 95%;

height: 80%;

}

path {

stroke: #09151b;

stroke-linecap:round;

stroke-width: 42;

fill:none;

}

#sec {

stroke: #6f7f24;

stroke-width: 20;

}

#min {

stroke: #3d601b;

stroke-width: 38;

}

#hour {

stroke: #13441e;

stroke-width: 38;

}

JAVASCRIPT

是時(shí)鐘動(dòng)起來(lái)的js代碼簡(jiǎn)單的使用js定時(shí)器來(lái)制作。

setInterval(function() {

function r(el, deg) {

el.setAttribute('transform', 'rotate('+ deg +' 500 500)')

}

var d = new Date()

r(sec, 6*d.getSeconds())

r(min, 6*d.getMinutes())

r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)

}, 1000)

總結(jié)

以上是生活随笔為你收集整理的HTML简易时钟教程,html5 svg简单的模拟时钟特效-HTML5动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。