效果演示(加快了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>
- 第2-22行，定义了旋转的中性点及旋转的角度；
- 第23-33行，定义了时针的效果，同时定义了43200秒旋转一周，即12小时旋转360度；
- 第34-44行，定义了分针的效果，同时定义了3600秒旋转一周，即1小时旋转360度；
- 第45-55行，定义了秒针的效果，同时定义了60秒旋转一周，即1分钟旋转360度；
- 第57-65行，定义了表盘；
- 第68-71行，显示时针、分针、秒针及表盘。
至此完成了一个简单的时钟，如果要与当前计算机时间一致，只需要使用JS调整时针、分针、秒针的初始角度就可以了。