1.face {
2  position: relative;
3  width: 180px;
4  height: 180px;
5  border-radius: 50%;
6  outline: 10px solid #333;
7  background: repeating-radial-gradient(circle at 50% 50%, 
8  rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, 
9  transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, 
10  transparent 3%), conic-gradient(white 0%, silver 10%, 
11  white 35%, silver 45%, white 60%, silver 70%, 
12  white 80%, silver 95%, white 100%);
13  box-shadow: inset 0 0 20px #0007;
14}
15
16.hour {
17  position: absolute;
18  width: 5px;
19  height: 60px;
20  background: #aaa;
21  left: 87.5px;
22  top: 43px;
23  border-radius: 3px 3px 1px 1px;
24  transform-origin: 2px 47px;
25  box-shadow: 0 0 5px #0005,inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;
26  z-index: 1;
27  animation: watch 43200s linear infinite;
28}
29
30.minute {
31  position: absolute;
32  width: 4px;
33  height: 78px;
34  background: #aaa;
35  left: 88px;
36  top: 25px;
37  border-radius: 3px 3px 1px 1px;
38  transform-origin: 2px 65px;
39  box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;
40  z-index: 2;
41  animation: watch 3600s linear infinite;
42}
43
44.second {
45  position: absolute;
46  width: 10px;
47  height: 10px;
48  background: red;
49  left: 85px;
50  top: 85px;
51  border-radius: 50%;
52  border: 1px solid #eee;
53  z-index: 3;
54  animation: watch 60s steps(60, end) 0s infinite;
55}
56
57.second::before {
58  content: "";
59  position: absolute;
60  width: 1px;
61  height: 85px;
62  left: 3px;
63  bottom: -10px;
64  background: red;
65  border-radius: 2px;
66  box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2);
67}
68
69.second::after {
70  content: "";
71  position: absolute;
72  width: 4px;
73  height: 4px;
74  left: 2px;
75  top: 2px;
76  background: #555;
77  border-radius: 50%;
78}
79
80.v-index {
81  position: absolute;
82  color: #333;
83  font-size: 24px;
84  left: 83.5px;
85  top: -3px;
86  text-shadow: 0 157px 0 #333;
87  z-index: 1
88}
89
90.h-index {
91  position: absolute;
92  color: #333;
93  font-size: 24px;
94  top: 72px;
95  left: 5px;
96  transform: rotate(-90deg);
97  text-shadow: 0 158px 0 #333;
98  z-index: 1;
99}
100
101@keyframes watch {
102  0% {
103    transform: rotate(0deg);
104  }
105
106  100% {
107    transform: rotate(360deg);
108  }
109}
110