File tree Expand file tree Collapse file tree 1 file changed +65
-0
lines changed Expand file tree Collapse file tree 1 file changed +65
-0
lines changed Original file line number Diff line number Diff line change 1+ body {
2+ display : flex;
3+ justify-content : center;
4+ align-items : center;
5+ height : 100vh ;
6+ background : # f0f0f0 ;
7+ margin : 0 ;
8+ }
9+
10+ .clock {
11+ position : relative;
12+ width : 300px ;
13+ height : 300px ;
14+ border : 10px solid # 333 ;
15+ border-radius : 50% ;
16+ background : white;
17+ box-shadow : 0 0 10px rgba (0 , 0 , 0 , 0.2 );
18+ }
19+
20+ .hand {
21+ position : absolute;
22+ background : # 333 ;
23+ border-radius : 50% ;
24+ transform-origin : bottom;
25+ transform : rotate (90deg );
26+ transition : transform 0.5s cubic-bezier (0.4 , 2.3 , 0.3 , 1 );
27+ }
28+
29+ .hour {
30+ width : 6px ;
31+ height : 80px ;
32+ left : 50% ;
33+ top : 50% ;
34+ transform : translateX (-50% );
35+ background : # 333 ;
36+ }
37+
38+ .minute {
39+ width : 4px ;
40+ height : 110px ;
41+ left : 50% ;
42+ top : 50% ;
43+ transform : translateX (-50% );
44+ background : # 666 ;
45+ }
46+
47+ .second {
48+ width : 2px ;
49+ height : 120px ;
50+ left : 50% ;
51+ top : 50% ;
52+ transform : translateX (-50% );
53+ background : red;
54+ }
55+
56+ .center {
57+ position : absolute;
58+ width : 14px ;
59+ height : 14px ;
60+ background : # 333 ;
61+ border-radius : 50% ;
62+ left : 50% ;
63+ top : 50% ;
64+ transform : translate (-50% , -50% );
65+ }
You can’t perform that action at this time.
0 commit comments