CSS3+HTML5特效9 - 簡單的時鐘

效果演示(加快了100倍)

 

 

 

 

 

 

 

 

 

 

 

實現原理

利用CSS3的transform-origin 及 transform 完成以上效果。

 

代碼及說明

 1 <style>
 2 @-webkit-keyframes rotateLabel {
 3     0%{
 4         -webkit-transform-origin:0% 100%;
 5         -webkit-transform: rotate(0deg);
 6     }
 7     100%{
 8         -webkit-transform-origin:0% 100%;
 9         -webkit-transform: rotate(360deg);
10     }
11 }
12  
13 @keyframes rotateLabel {
14     0%{
15         transform-origin:0% 100%;
16         transform: rotate(0deg);
17     }
18     100%{
19         transform-origin:0% 100%;
20         transform: rotate(360deg);
21     }
22  }
23 .hour
24 {
25     position: absolute;
26     top: 60px;
27     left: 200px;
28     width: 1px;
29     height: 50px;
30     background-color: #000;
31     -webkit-animation:rotateLabel 43200s infinite linear ;
32     animation:rotateLabel 43200s infinite linear ;
33 }
34 .minute
35 {
36     position: absolute;
37     top: 40px;
38     left: 200px;
39     width: 1px;
40     height: 70px;
41     background-color: #0000ff;
42     -webkit-animation:rotateLabel 3600s infinite linear ;
43     animation:rotateLabel 3600s infinite linear ;
44 }
45 .second
46 {
47     position: absolute;
48     top: 10px;
49     left: 200px;
50     width: 1px;
51     height: 100px;
52     background-color: #ff0000;
53     -webkit-animation:rotateLabel 60s infinite linear ;
54     animation:rotateLabel 60s infinite linear ;
55 }
56 
57 .border{
58     position: absolute;
59     top: 5px;
60     left: 95px;
61     width: 210px;
62     height: 210px;
63     border-radius: 105px;
64     border: 1px solid #e0e0e0;
65 }
66 </style>
67 
68 <div class="hour"></div>
69 <div class="minute"></div>
70 <div class="second"></div>
71 <div class="border"></div>

 

1. 第2-22行，定義了旋轉的中性點及旋轉的角度；
2. 第23-33行，定義了時針的效果，同時定義了43200秒旋轉一週，即12小時旋轉360度；
3. 第34-44行，定義了分針的效果，同時定義了3600秒旋轉一週，即1小時旋轉360度；
4. 第45-55行，定義了秒針的效果，同時定義了60秒旋轉一週，即1分鐘旋轉360度；
5. 第57-65行，定義了錶盤；
6. 第68-71行，顯示時針、分針、秒針及錶盤。

 

至此完成了一個簡單的時鐘，若是要與當前計算機時間一致，只須要使用JS調整時針、分針、秒針的初始角度就能夠了。