在網頁上，特別是個人博客中經常會用到時鐘插件，一款個性化的時鐘插件不僅可以讓頁面顯得美觀，而且可以讓訪客看到當前的日期和時間。今天我們給大家收集了15個超強悍的圓盤時鐘動畫，很多都是基於CSS3，也有一部分利用jQuery和SVG，讓我們一起來看看吧。 1、純CSS3/SVG實現的帶秒針表盤圓盤復古 ...
在網頁上，特別是個人博客中經常會用到時鐘插件，一款個性化的時鐘插件不僅可以讓頁面顯得美觀，而且可以讓訪客看到當前的日期和時間。今天我們給大家收集了15個超強悍的圓盤時鐘動畫，很多都是基於CSS3，也有一部分利用jQuery和SVG，讓我們一起來看看吧。
1、純CSS3/SVG實現的帶秒針表盤圓盤復古時鐘
現在的網頁上圓盤時鐘越來越少見了，更多的是數字時鐘和數字日曆。之前我們分享過一些基於jQuery和CSS3的圓盤時鐘動畫，比如純CSS3 3D立體圓盤時鐘動畫和jQuery實現一個掛在牆上的圓盤時鐘動畫都非常不錯。這次要給大家帶來一款比較復古的圓盤時鐘，基於純CSS3，盤面是SVG繪製而成，並沒有使用任何圖片。時鐘整體外觀比較懷舊，給人不一樣的視覺感受。
2、HTML5 Canvas 3種不同風格的圓盤時鐘
這次我們要繼續為大家分享一款基於HTML5 Canvas的圓盤時鐘動畫，和之前分享的這款HTML5 Canvas 圓形時鐘動畫類似，它也是基於HTML5的，但是這款時鐘提供了3種不同的樣式風格，而且時鐘的大小可以自己控制。
3、迷你可愛的jQuery/CSS3圓盤時鐘
記得以前跟大家分享過好幾款基於jQuery或者HTML5/CSS3的圓盤時鐘動畫插件，今天要介紹的也是一款基於jQuery和CSS3的簡易圓盤時鐘，它的特點是圓盤中央會有一個很大的數字，表示當前是幾點。
4、CSS3帶數字時鐘的創意圓盤時鐘動畫
前幾天我們剛剛為大家分享過一款基於SVG和CSS3的復古圓盤時鐘，大家可以在這裡查看演示和這裡下載源碼。今天又要給大家帶來另外一款CSS3圓盤時鐘，它的特點是圓盤對半分，一半顯示數字時鐘信息，另一半是半個圓盤時鐘，樣式設計上非常富有創意。
5、HTML5 SVG圓盤時鐘動畫 5種時鐘樣式
今天我們要來分享一款基於HTML5和SVG的圓盤時鐘動畫，首先，圓盤時鐘的時間是和你的本地時間同步的，因此，你完全可以用它來看上網時間。另外，這款HTML5圓盤時鐘提供了5中不同的盤面樣式，有帶刻度的和不帶刻度的，還挺實用的。
6、CSS3手錶倒計時動畫 可自定義主題皮膚
早段時間，我們為大家分享過一些比較炫酷和實用的時鐘手錶插件，比如這款純CSS3 3D立體圓盤時鐘動畫和HTML5仿Apple Watch時鐘動畫，效果都非常不錯。今天我們要利用CSS3來實現一個手錶樣式的倒計時動畫，功能相對比較簡單，最大的特點在於可以切換4種不同的主題皮膚。
7、HTML5 Canvas環形數字時鐘 精確到毫秒
之前我們分享過很多非常富有創意的jQuery時鐘和HTML5時鐘，這次我們要分享的也是一款基於HTML5 Canvas的環形數字時鐘，它的另外一個特點是可以精確到毫秒，環形指針也有發光的視覺效果。
8、jQuery實現一個掛在牆上的圓盤時鐘動畫
今天我們要給大家介紹一款基於jQuery的圓盤時鐘動畫，首先時鐘是可以正確顯示當前本地時間的，而且也可以隨著本地時間實時更新。其次這款時鐘與前面分享的HTML5仿Apple Watch時鐘動畫不同的是，這個時鐘呈現出掛在牆上的效果，看上去比較簡潔和美觀。
9、純CSS3 3D立體圓盤時鐘動畫
我們已經分享過很多漂亮的圓盤時鐘動畫了，有基於jQuery的，也有基於HTML5和CSS3的，這其中也不乏SVG繪製的時鐘動畫。今天我們要繼續給大家分享另外一款基於純CSS3的3D立體圓盤時鐘，它和其他圓盤時鐘不一樣，並不可以讀取本地時間，並且實時更新。另外一個特點是它的外觀呈現出3D立體的視覺效果，看起來非常酷。
10、基於SVG的HTML5圓盤時鐘動畫
前兩天我們分享過一款基於SVG的圓盤時鐘，可以有不同的時鐘盤面。今天我們要再來分享另外一款基於SVG的HTML5圓盤時鐘動畫，和上一款類似，這款HTML5時鐘也能準確獲取本地的時間，並且秒針、分針、時針可以走動，效果還不錯。
11、15個超絢麗的HTML5 Canvas時鐘動畫特效
之前我們有給大家介紹過很多基於HTML5的時鐘動畫，比如這款5種樣式的HTML5 SVG圓盤時鐘動畫和HTML5仿Apple Watch時鐘動畫，效果都很酷。這次要分享的是15個超絢麗的HTML5 Canvas時鐘動畫特效，它們很多都有各自不同的外觀，有幾個時鐘的造型還非常新穎奇特，因為是基於HTML5 Canvas的，所以你的瀏覽器需要支持HTML5。
12、jQuery/CSS3帶數字時鐘的圓盤時鐘
之前我們分享過很多基於jQuery和CSS3的時鐘插件了，有數字時鐘，今天要介紹的這款時鐘插件是數字時鐘和圓盤時鐘的混合，也就是在圓盤時鐘上嵌入了一個數字時鐘，更加美觀和實用。
13、可愛的CSS3圓盤時鐘動畫
之前我們分享過一些基於CSS3和jQuery的圓盤時鐘，比如純CSS3實現圓盤時鐘動畫和HTML5/CSS3時尚的圓盤時鐘動畫。今天要分享的也是一款可愛的CSS3圓盤時鐘動畫，時鐘背景是乳白色的，顯得非常乾凈，另外，時鐘也可以和你本地的時候保持同步。
14、純CSS3實現圓盤時鐘動畫
記得之前分享過一款基於SVG的HTML5圓盤時鐘動畫，效果還挺好的，今天我們繼續為大家分享一款更酷的純CSS3實現的圓盤時鐘動畫，這款時鐘動畫在初始化的時候就有動畫特效，包括圓盤的形成，還有時鐘指針的形成，都賦予了非常酷的動畫色彩。
15、HTML5 Canvas 圓形時鐘動畫
前不久我們剛為大家分享過一款很不錯的jQuery/CSS3帶數字時鐘的圓盤時鐘，效果很不錯。今天我們要繼續為大家介紹另外一個基於HTML5 Canvas的圓形時鐘動畫。它的功能非常簡單，就是一個簡單的時鐘，時針分針和秒針的顏色各不相同。
以上就是15個超強悍的CSS3圓盤時鐘動畫，歡迎收藏分享。轉載請註明原文鏈接：http://www.html5tricks.com/15-cool-css3-circle-clock.html
