原文:

效果演示(加快了100倍)

 

 

 

 

 

 

 

 

 

 

 

实现原理

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

 

代码及说明

1 67 68 
     
69 
     
70 
     
71 
     

 

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调整时针、分针、秒针的初始角度就可以了。