效果演示(加快了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调整时针、分针、秒针的初始角度就可以了。
CSS3+HTML5特效9 - 简单的时钟,布布扣,bubuko.com
时间： 2024-10-25 11:22:11