本来打算还做一下系统时间动态时钟，但是奔着纯CSS3的目的去就不加了。。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>css3时钟</title>
6 <style>
7 *{
8 margin:0;
9 padding:0;
10 }
11 body{
12 font:700 20px/1 "Microsoft YaHei";
13 }
14 .container{
15 margin:100px 0 0 100px;
16 width:300px;
17 height:300px;
18 border:5px solid #000;
19 border-radius:50%;
20 -o-border-radius:50%;
21 -ms-border-radius:50%;
22 -moz-border-radius:50%;
23 -webkit-border-radius:50%;
24 position:relative;
25 }
26 .dot{
27 width:10px;
28 height:10px;
29 background-color:#000;
30 border-radius:50%;
31 -o-border-radius:50%;
32 -ms-border-radius:50%;
33 -moz-border-radius:50%;
34 -webkit-border-radius:50%;
35 position:absolute;
36 top:50%;
37 left:50%;
38 margin:-5px 0 0 -5px;
39 z-index:3;
40 }
41 .hour{
42 width:10px;
43 height:50px;
44 background-color:#000;
45 position:absolute;
46 top:50%;
47 left:50%;
48 z-index:0;
49 margin:-50px 0 0 -5px;
50 border-top-left-radius:5px;
51 -o-border-top-left-radius:5px;
52 -ms-border-top-left-radius:5px;
53 -moz-border-top-left-radius:5px;
54 -webkit-border-top-left-radius:5px;
55 border-top-right-radius:5px;
56 -o-border-top-right-radius:5px;
57 -ms-border-top-right-radius:5px;
58 -moz-border-top-right-radius:5px;
59 -webkit-border-top-right-radius:5px;
60 animation:move 43200s steps(12,end) infinite;
61 -o-animation:move 43200s steps(12,end) infinite;
62 -ms-animation:move 43200s steps(12,end) infinite;
63 -moz-animation:move 43200s steps(12,end) infinite;
64 -webkit-animation:move 43200s steps(12,end) infinite;
65 transform-origin:bottom;
66 -o-transform-origin:bottom;
67 -ms-transform-origin:bottom;
68 -moz-transform-origin:bottom;
69 -webkit-transform-origin:bottom;
70 }
71 .minute{
72 width:6px;
73 height:100px;
74 background-color:#000;
75 position:absolute;
76 top:50%;
77 left:50%;
78 z-index:1;
79 margin:-100px 0 0 -3px;
80 border-top-left-radius:3px;
81 -o-border-top-left-radius:3px;
82 -ms-border-top-left-radius:3px;
83 -moz-border-top-left-radius:3px;
84 -webkit-border-top-left-radius:3px;
85 border-top-right-radius:3px;
86 -o-border-top-right-radius:3px;
87 -ms-border-top-right-radius:3px;
88 -moz-border-top-right-radius:3px;
89 -webkit-border-top-right-radius:3px;
90 animation:move 3600s steps(60,end) infinite;
91 -o-animation:move 3600s steps(60,end) infinite;
92 -ms-animation:move 3600s steps(60,end) infinite;
93 -moz-animation:move 3600s steps(60,end) infinite;
94 -webkit-animation:move 3600s steps(60,end) infinite;
95 transform-origin:bottom;
96 -o-transform-origin:bottom;
97 -ms-transform-origin:bottom;
98 -moz-transform-origin:bottom;
99 -webkit-transform-origin:bottom;
100 }
101 .second{
102 width:2px;
103 height:130px;
104 background-color:red;
105 position:absolute;
106 top:50%;
107 left:50%;
108 z-index:2;
109 margin:-100px 0 0 -1px;
110 animation:move 60s steps(60,end) infinite;
111 -o-animation:move 60s steps(60,end) infinite;
112 -ms-animation:move 60s steps(60,end) infinite;
113 -moz-animation:move 60s steps(60,end) infinite;
114 -webkit-animation:move 60s steps(60,end) infinite;
115 transform-origin:center 76.923%;
116 -o-transform-origin:center 76.923%;
117 -ms-transform-origin:center 76.923%;
118 -moz-transform-origin:center 76.923%;
119 -webkit-transform-origin:center 76.923%;
120 }
121 .hour12{
122 position:absolute;
123 left:50%;
124 margin-left:-12.336px;
125 margin-top:5px;
126 }
127 .hour3{
128 position:absolute;
129 left:100%;
130 top:50%;
131 margin-left:-17.3438px;
132 margin-top:-10px;
133 }
134 .hour6{
135 position:absolute;
136 left:50%;
137 top:100%;
138 margin-left:-6.1719px;
139 margin-top:-25px;
140 }
141 .hour9{
142 position:absolute;
143 top:50%;
144 margin-left:5px;
145 margin-top:-10px;
146 }
147
148 </style>
149 <style id="animation">
150 @keyframes move{
151 to{
152 transform:rotate(360deg);
153 -o-transform:rotate(360deg);
154 -ms-transform:rotate(360deg);
155 -moz-transform:rotate(360deg);
156 -webkit-transform:rotate(360deg);
157 }
158 }
159 @-o-keyframes move{
160 to{
161 transform:rotate(360deg);
162 -o-transform:rotate(360deg);
163 -ms-transform:rotate(360deg);
164 -moz-transform:rotate(360deg);
165 -webkit-transform:rotate(360deg);
166 }
167 }
168 @-ms-keyframes move{
169 to{
170 transform:rotate(360deg);
171 -o-transform:rotate(360deg);
172 -ms-transform:rotate(360deg);
173 -moz-transform:rotate(360deg);
174 -webkit-transform:rotate(360deg);
175 }
176 }
177 @-moz-keyframes move{
178 to{
179 transform:rotate(360deg);
180 -o-transform:rotate(360deg);
181 -ms-transform:rotate(360deg);
182 -moz-transform:rotate(360deg);
183 -webkit-transform:rotate(360deg);
184 }
185 }
186 @-webkit-keyframes move{
187 to{
188 transform:rotate(360deg);
189 -o-transform:rotate(360deg);
190 -ms-transform:rotate(360deg);
191 -moz-transform:rotate(360deg);
192 -webkit-transform:rotate(360deg);
193 }
194 }
195 </style>
196 </head>
197 <body>
198 <span>by scott</span>
199 <div class="container">
200 <div class="dot"></div>
201 <div class="hour"></div>
202 <div class="minute"></div>
203 <div class="second"></div>
204 <div class="hour12">12</div>
205 <div class="hour3">3</div>
206 <div class="hour6">6</div>
207 <div class="hour9">9</div>
208 </div>
209 </body>
210 </html>
demo：http://wangpengfei15975.github.io/clock
时间： 2024-10-10 13:44:20