本文作者h(yuǎn)tml5tricks，轉(zhuǎn)載請注明出處

在網(wǎng)頁上，特別是個人博客中經(jīng)常會用到時鐘插件，一款個性化的時鐘插件不僅可以讓頁面顯得美觀，而且可以讓訪客看到當(dāng)前的日期和時間。今天我們給大家收集了15個超強(qiáng)悍的圓盤時鐘動畫，很多都是基于CSS3，也有一部分利用jQuery和SVG，讓我們一起來看看吧。

1、純CSS3/SVG實現(xiàn)的帶秒針表盤圓盤復(fù)古時鐘

現(xiàn)在的網(wǎng)頁上圓盤時鐘越來越少見了，更多的是數(shù)字時鐘和數(shù)字日歷。之前我們分享過一些基于jQuery和CSS3的圓盤時鐘動畫，比如純CSS3 3D立體圓盤時鐘動畫和jQuery實現(xiàn)一個掛在墻上的圓盤時鐘動畫都非常不錯。這次要給大家?guī)硪豢畋容^復(fù)古的圓盤時鐘，基于純CSS3，盤面是SVG繪制而成，并沒有使用任何圖片。時鐘整體外觀比較懷舊，給人不一樣的視覺感受。

2、

這次我們要繼續(xù)為大家分享一款基于HTML5?Canvas的圓盤時鐘動畫，和之前分享的這款HTML5 Canvas 圓形時鐘動畫類似，它也是基于HTML5的，但是這款時鐘提供了3種不同的樣式風(fēng)格，而且時鐘的大小可以自己控制。

3、迷你可愛的jQuery/CSS3圓盤時鐘

記得以前跟大家分享過好幾款基于jQuery或者HTML5/CSS3的圓盤時鐘動畫插件，今天要介紹的也是一款基于jQuery和CSS3的簡易圓盤時鐘，它的特點(diǎn)是圓盤中央會有一個很大的數(shù)字，表示當(dāng)前是幾點(diǎn)。

4、CSS3帶數(shù)字時鐘的創(chuàng)意圓盤時鐘動畫

前幾天我們剛剛為大家分享過一款基于SVG和CSS3的復(fù)古圓盤時鐘，大家可以在這里查看演示和這里下載源碼。今天又要給大家?guī)砹硗庖豢頒SS3圓盤時鐘，它的特點(diǎn)是圓盤對半分，一半顯示數(shù)字時鐘信息，另一半是半個圓盤時鐘，樣式設(shè)計上非常富有創(chuàng)意。

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

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

6、CSS3手表倒計時動畫 可自定義主題皮膚

早段時間，我們?yōu)榇蠹曳窒磉^一些比較炫酷和實用的時鐘手表插件，比如這款純CSS3 3D立體圓盤時鐘動畫和HTML5仿Apple Watch時鐘動畫，效果都非常不錯。今天我們要利用CSS3來實現(xiàn)一個手表樣式的倒計時動畫，功能相對比較簡單，最大的特點(diǎn)在于可以切換4種不同的主題皮膚。

7、HTML5 Canvas環(huán)形數(shù)字時鐘 精確到毫秒

之前我們分享過很多非常富有創(chuàng)意的jQuery時鐘和HTML5時鐘，這次我們要分享的也是一款基于HTML5 Canvas的環(huán)形數(shù)字時鐘，它的另外一個特點(diǎn)是可以精確到毫秒，環(huán)形指針也有發(fā)光的視覺效果。

8、jQuery實現(xiàn)一個掛在墻上的圓盤時鐘動畫

今天我們要給大家介紹一款基于jQuery的圓盤時鐘動畫，首先時鐘是可以正確顯示當(dāng)前本地時間的，而且也可以隨著本地時間實時更新。其次這款時鐘與前面分享的HTML5仿Apple Watch時鐘動畫不同的是，這個時鐘呈現(xiàn)出掛在墻上的效果，看上去比較簡潔和美觀。

9、純CSS3 3D立體圓盤時鐘動畫

我們已經(jīng)分享過很多漂亮的圓盤時鐘動畫了，有基于jQuery的，也有基于HTML5和CSS3的，這其中也不乏SVG繪制的時鐘動畫。今天我們要繼續(xù)給大家分享另外一款基于純CSS3的3D立體圓盤時鐘，它和其他圓盤時鐘不一樣，并不可以讀取本地時間，并且實時更新。另外一個特點(diǎn)是它的外觀呈現(xiàn)出3D立體的視覺效果，看起來非常酷。

10、基于SVG的HTML5圓盤時鐘動畫

前兩天我們分享過一款基于SVG的圓盤時鐘，可以有不同的時鐘盤面。今天我們要再來分享另外一款基于SVG的HTML5圓盤時鐘動畫，和上一款類似，這款HTML5時鐘也能準(zhǔn)確獲取本地的時間，并且秒針、分針、時針可以走動，效果還不錯。

11、15個超絢麗的HTML5 Canvas時鐘動畫特效

之前我們有給大家介紹過很多基于HTML5的時鐘動畫，比如這款5種樣式的HTML5 SVG圓盤時鐘動畫和HTML5仿Apple Watch時鐘動畫，效果都很酷。這次要分享的是15個超絢麗的HTML5 Canvas時鐘動畫特效，它們很多都有各自不同的外觀，有幾個時鐘的造型還非常新穎奇特，因為是基于HTML5 Canvas的，所以你的瀏覽器需要支持HTML5。

12、jQuery/CSS3帶數(shù)字時鐘的圓盤時鐘

之前我們分享過很多基于jQuery和CSS3的時鐘插件了，有數(shù)字時鐘，今天要介紹的這款時鐘插件是數(shù)字時鐘和圓盤時鐘的混合，也就是在圓盤時鐘上嵌入了一個數(shù)字時鐘，更加美觀和實用。

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

之前我們分享過一些基于CSS3和jQuery的圓盤時鐘，比如純CSS3實現(xiàn)圓盤時鐘動畫和HTML5/CSS3時尚的圓盤時鐘動畫。今天要分享的也是一款可愛的CSS3圓盤時鐘動畫，時鐘背景是乳白色的，顯得非常干凈，另外，時鐘也可以和你本地的時候保持同步。

14、純CSS3實現(xiàn)圓盤時鐘動畫

記得之前分享過一款基于SVG的HTML5圓盤時鐘動畫，效果還挺好的，今天我們繼續(xù)為大家分享一款更酷的純CSS3實現(xiàn)的圓盤時鐘動畫，這款時鐘動畫在初始化的時候就有動畫特效，包括圓盤的形成，還有時鐘指針的形成，都賦予了非常酷的動畫色彩。

15、HTML5 Canvas 圓形時鐘動畫

前不久我們剛為大家分享過一款很不錯的jQuery/CSS3帶數(shù)字時鐘的圓盤時鐘，效果很不錯。今天我們要繼續(xù)為大家介紹另外一個基于HTML5?Canvas的圓形時鐘動畫。它的功能非常簡單，就是一個簡單的時鐘，時針分針和秒針的顏色各不相同。

總結(jié)

以上是生活随笔為你收集整理的css3半空心圆_15个超强悍的CSS3圆盘时钟动画赏析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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