CSS3+HTML5特效9 - 简单的时钟

 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>