一、機械時鐘
1.最終效果
用 css 繪製的機械時鐘效果如下：
html 中**結構為：
其中 clock 類為表盤， min 類是分鐘刻度，hour 類是時鐘刻度，numbers 類是數字刻度，類名為 pointer 的 ul 中包含的則是時針、分針和秒針等。
2.繪製表盤
首先要把表盤和表盤中心給繪製出來，如下圖：
表盤中心要處在正中心，使用絕對定位進行實現，**如下：
/*表盤*/.clock 13 if (val > 0 && val < 180) 16
17 if (val > 90 && val < 270) 20 if (val < 90 || val > 270) 23 html += "
";24 }25 $(".hour").html(html);26 }
分鐘的刻度線繪製和時鐘類似，除此之外，還要繪製各個小時的數字刻度，效果如下：
4.繪製指標
指標的繪製要把時針、分針和秒針都繪製出來，需要注意的是時鐘最短最粗，秒針最長最細，而且都要用絕對定位使指標處在表盤中心，實現的效果如下：
時針、分針和秒針的 css **如下：
/*指標*/.p-hour , 1000)17 }
二、數字時鐘
1.最終效果
用 css 繪製的數字時鐘效果如下：
html 中**結構為：
其中 back 類是時鐘的背景，content 類則是數字時鐘表盤，在 content 類的 div 中包含了八個 div，分別表示六個數字和兩個分隔符號。
2.繪製數字
每乙個數字由七個部分組成，每個部分都類似下圖中的樣式：
這就是乙個矩形，兩端分別有乙個三角形，而這兩個三角形都可以通過使用偽元素 before 和 after 實現，實現的**如下：
.part-115 if (num === 2) 21 if (num === 3) 27 if (num === 4) 35 if (num === 5) 41 if (num === 6) 45 if (num === 7) 55 if (num === 9) 59 if (num === 0) 63 }
在上面的**中，每次改動都要 addclass("change")，其中 change 類是乙個新的 class，用於對偽元素進行覆蓋，相應**為：
.change::before
5.時間變換
由於我們顯示數字的時候不僅修改了背景色，而且還增加了乙個新的 class，所以在時間變換的時候，不僅需要修改顯示的數字，還需要對相應的 css 進行修改，這樣才能正確的變換時間。實現的具體方法為每次顯示數字時，先把每個部分的 css 重置成最開始的樣子，背景色改為白色，因而顯示數字的**改為：
1 functionshowdigit(name, num) 30 if (num === 2) 36 if (num === 3) 42 if (num === 4) 50 if (num === 5) 56 if (num === 6) 60 if (num === 7) 70 if (num === 9) 74 if (num === 0) 78 }
完整**已上傳到 github！
css畫鐘錶 如何使用css3繪製出圓形動態時鐘
使用css3繪製出圓形動態時鐘的原理 眾所周知的是div形狀是方形的，那麼我們首先需要使用border radius屬性將其變換成圓形。為了使指標轉動起來，我們需要使用 webkit transform origin center100px 來設定我們的旋轉基點。然後利用 webkit transf...
學習 CSS 之用 CSS 3D 實現炫酷效果
把大象關進冰箱需要幾步？三步，把冰箱門開啟，把大象關進去，把冰箱門關上。用 css 實現 3d 效果需幾步？三步，設定透視效果 perspective，改變元素載體為 preserve 3d，對元素進行 3d 轉換操作。perspective 屬性決定了我們從什麼地方檢視元素，定義時的 perspe...
學習 CSS 之用 CSS 3D 實現炫酷效果
把大象關進冰箱需要幾步？三步，把冰箱門開啟，把大象關進去，把冰箱門關上。用 css 實現 3d 效果需幾步？三步，設定透視效果 perspective，改變元素載體為 preserve 3d，對元素進行 3d 轉換操作。perspective 屬性決定了我們從什麼地方檢視元素，定義時的 perspe...