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