1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表</title>
6 <style>
7
8
9 /* 设置关键帧 */
10 @keyframes clock{
11 from{
12 transform: rotateZ(0);
13 }
14 to{
15 transform: rotateZ(1turn);
16 }
17 }
18
19 /* 设置表盘的样式 */
20 .outer{
21 width: 500px;
22 height: 500px;
23 /* border: 10px solid black; */
24 border-radius: 50%;
25 margin: 0 auto;
26
27 /* 设置背景图片 */
28 background: url(img/bg3.jpg) 0 0/cover;
29
30 /* 开启相对定位 */
31 position: relative;
32 }
33
34 /* 设置秒针的样式 */
35 .sec,
36 .min,
37 .hour{
38 /* 开启绝对定位 */
39 position: absolute;
40 width: 2px;
41 height: 46%;
42 background-color: #f00;
43
44 left: 0;
45 right: 0;
46 bottom: 50%;
47 margin: 0 auto;
48
49 /* 设置变形的原点 */
50 transform-origin: bottom;
51
52 /* animation: clock 60s steps(60); */
53 }
54
55 /* 秒针 */
56 .sec{
57 animation: clock 10s steps(60) infinite;
58 }
59
60
61 /* 分针 */
62 .min{
63 width: 4px;
64 height: 42%;
65 background-color: #000;
66
67 animation: clock 600s steps(60) infinite;
68 }
69
70 /* 时针 */
71 .hour{
72 width: 6px;
73 height: 38%;
74 background-color: #000;
75
76 animation: clock 7200s linear infinite;
77 }
78
79
80
81 </style>
82 </head>
83 <body>
84
85 <!-- 创建表的外部容器 -->
86 <div class="outer">
87
88 <!-- 创建创建时针 -->
89 <div class="hour"></div>
90
91 <!-- 创建创建分针 -->
92 <div class="min"></div>
93
94 <!-- 创建秒针 -->
95 <div class="sec"></div>
96
97 </div>
98
99
100
101 </body>
102 </html>
