14款形態各異的逾時尚HTML5時鐘動畫

標籤：

14款逾時尚的HTML5時鐘動畫(附源碼)

 

 

 

 

　　時鐘動畫在網頁應用中也非常廣泛，在一些個人部落格中，我們經常會看到一些相當個人化的HTML5時鐘動畫。今天我們向大家分享了14款形態各異的逾時尚HTML5時鐘動畫，其中有圓盤時鐘、3D時鐘、個人化時鐘等，強大的HTML5為時鐘動畫增添了不少精彩，希望能給大家帶來協助。

　　1、可愛的CSS3圓盤時鐘動畫

　　線上示範：http://www.html5tricks.com/demo/css3-circle-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357103349/css3-circle-clock.rar

　　今天要分享的也是一款可愛的CSS3圓盤時鐘動畫，時鐘背景是乳白色的，顯得非常乾淨，另外，時鐘也可以和你本地的時候保持同步。

 

　　2、HTML5 SVG圓盤時鐘動畫 5種時鐘樣式

　　線上示範：http://www.html5tricks.com/demo/html5-svg-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357131317/html5-svg-clock.rar

　　今天我們要來分享一款基於HTML5和SVG的圓盤時鐘動畫，首先，圓盤時鐘的時間是和你的本地時間同步的，因此，你完全可以用它來看上網時間。另外，這款HTML5圓盤時鐘提供了5中不同的盤面樣式，有帶刻度的和不帶刻度的，還挺實用的。

 

　　3、HTML5仿Apple Watch時鐘動畫

　　線上示範：http://www.html5tricks.com/demo/html5-apple-watch-clock-face/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357176130/html5-apple-watch-clock-face.rar

　　Apple Watch剛剛發布不久，就已經有國外的大牛將其時鐘錶盤介面用HTML5模仿出來了，並且這款HTML5仿Apple Watch的時鐘是動態，可以根據本地時間即時更新指標資料。時鐘的介面非常華麗，確實有蘋果的風格，HTML5也的確非常強大。

 

　　4、jQuery帶鬧鐘鬧鈴的數字時鐘

　　線上示範：http://www.html5tricks.com/demo/jquery-alarm-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357212770/jquery-alarm-clock.rar

　　今天要分享的是一款基於jQuery的數字時鐘，這款jQuery時鐘的一大特點是可以設定鬧鈴，可以做一個很好的鬧鐘外掛程式。點擊鬧鐘設定按鈕即可彈出一個對話方塊，你可以多少時間後啟用鬧鈴，比如1分鐘後啟用，那麼就在minutes中設定1。1分鐘後，會彈出一個鬧鈴提示框，並伴隨提示聲音。

 

　　5、jQuery超酷平面時鐘特效外掛程式

　　線上示範：http://www.html5tricks.com/demo/jquery-cool-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357254895/jquery-cool-clock.rar

　　這是一個非常具有創意的jQuery時鐘外掛程式，它不像其他的時鐘外掛程式一樣是圓盤的或者是數位，它是一個平面時鐘，日期和時分秒的指標都是在平面上移動計時的，儘管這款jQuery平面時鐘外掛程式不能廣泛應用，但是創意是絕對可以肯定的。

 

　　6、HTML5/CSS3圓盤秒錶動畫 秒錶可暫停計時

　　線上示範：http://www.html5tricks.com/demo/html5-css3-stop-watch/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357285364/html5-css3-stop-watch.rar

　　今天我們要分享一款基於HTML5和CSS3的圓盤秒錶動畫，秒錶可以精確到0.001秒，並且可以在計時過程中暫停計時，同時秒錶可以隨時重設。

 

　　7、CSS3倒計時時鐘動畫

　　線上示範：http://www.html5tricks.com/demo/css3-clock-count/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357320552/css3-clock-count.rar

　　現在分享的這款CSS3應用是一個倒計時外掛程式，這款倒計時外掛程式的外觀還是比較簡單大氣的，加上陰影，有著3D立體的視覺效果。倒計時標有天、時、分、秒，我們可以很清晰的看出時鐘的走動。我們可以將它製作成掛件放到自己的個人部落格上去，來實現活動開始的倒計時功能。

 

　　8、純CSS3實現圓盤時鐘動畫

　　線上示範：http://www.html5tricks.com/demo/pure-css3-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357354724/pure-css3-clock.rar

　　今天我們繼續為大家分享一款更酷的純CSS3實現的圓盤時鐘動畫，這款時鐘動畫在初始化的時候就有動畫特效，包括圓盤的形成，還有時鐘指標的形成，都賦予了非常酷的動畫色彩。

 

　　9、HTML5/CSS3鬧鈴動畫特效 鬧鐘可以抖動

　　線上示範：http://www.html5tricks.com/demo/html5-css3-alarm/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357387630/html5-css3-alarm.rar

　　鬧鈴大家都用過，經常吵著你上學上班。今天我們要用HTML5/CSS3技術來實現一個類比的鬧鈴動畫特效，首先這個鬧鐘可不是擺設，它有時鐘的功能，你可以查看本地時間。另外這個鬧鈴在定點的時候會抖動起來，效果非常逼真，是一款挺有趣的HTML5動畫特效。

 

　　10、HTML5/CSS3時尚的圓盤時鐘動畫 帶當前日期

　　線上示範：http://www.html5tricks.com/demo/html5-css3-clock-with-date/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357437193/html5-css3-clock-with-date.rar

　　今天我們要分享一款利用HTML5和CSS3的圓盤時鐘動畫，時鐘外觀非常時尚。更重要的功能是，該HTML5時鐘動畫還帶有當前的日期，這是很多時鐘所沒有的功能。

 

　　11、一款很酷的CSS3翻頁時鐘動畫

　　線上示範：http://www.html5tricks.com/demo/css3-pretty-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357461162/css3-pretty-clock.rar

　　今天我們來分享另外一種風格的時鐘，這款CSS3時鐘動畫是一款數字時鐘，時間每過一秒，相應的位置就會像翻日曆一樣翻過去。另外，這款CSS3數字時鐘有點立體的效果，非常漂亮。

 

　　12、HTML5 Canvas實現會跳舞的時間動畫

　　線上示範：http://www.html5tricks.com/demo/html5-canvas-dance-time/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357545444/html5-canvas-dance-time.rar

　　這是一款很有意思的HTML5 Canvas時間動畫，總體來說，它是一個可以和用戶端同步的時鐘，其特點是當時間走動時，數字將會散落成一個個粒子動畫，這種HTML5 Canvas動畫在之前也有分享過，比如這個HTML5粒子文字特效。

 

　　13、HTML5 Canvas 3D 倒計時爆炸特效

　　線上示範：http://www.html5tricks.com/demo/html5-canvas-3d-explod-clock/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357567303/html5-canvas-3d-explod-clock.rar

　　今天要分享的這款 HTML5 3D 動畫特效非常給力，它是一個基於Canvas 的倒計時爆炸效果，隨著時間的走動，時間數字傍邊就會有爆炸的特效，一群像素點就會在數字中心爆發出來，感覺非常酷。而且應用了 HTML5 的 3D 特性，讓整一個時鐘顯得非常有立體感。

 

　　14、HTML5/SVG實現布谷鳥時鐘動畫

　　線上示範：http://www.html5tricks.com/demo/html5-svg-cuckoo/index.html

　　源碼下載：http://ds.devstore.cn/devstore/news/downfile/1451357093411/1451357598944/html5-svg-cuckoo.rar

　　這是一款基於HTML5和SVG的布谷鳥時鐘動畫，動畫效果就像老式的鐘樓裡的時鐘，整點報時的時候會出現一隻布谷鳥，並伴隨著一對新人的舞蹈，非常有意思的一款HTML5動畫。

14款形態各異的逾時尚HTML5時鐘動畫