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

HTML結構

html結構中使用SVG path來模擬時鐘的輪廓。

CSS樣式

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

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

是時鐘動起來的js代碼簡單的使用js定時器來制作。

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)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。