forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathanalog.css
More file actions
90 lines (76 loc) · 1.64 KB
/
analog.css
File metadata and controls
90 lines (76 loc) · 1.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/*analog.css*/
*, *:before, *:after {padding:0; margin:0;}
html {
background-color:#999;
background-size:cover;
font-family:'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
font-size: 2rem;
display:flex;
flex:1;
min-height: 100vh;
align-items: center;
}
.clock {
position: relative;
width: 30rem;
height: 30rem;
border:3rem solid #333;
border-radius:50%;
margin:50px auto;
position: relative;
padding:0;
box-shadow:
0 0 2rem 0.25rem rgba(0,0,0,0.25),
inset 0 0.5rem 0 0rem rgba(255,255,255,0.75),
inset 0 -1rem 2.5rem 0rem rgba(0,0,0,0.75),
0 1rem 1rem rgba(0,0,0,0.125);
}
.clock-face {
position: relative;
border-radius:50%;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
width:50%;
height:6px;
background:black;
position: absolute;
top:calc(50% - 3px);
transform-origin:100% 3px;
transform: rotate(90deg);
transition: all 0.05s cubic-bezier(0, 1.5, 1, 2);
}
.hour-hand {
/*transform: scale(0.7, 1.5);*/
} /* move 6° every 720,000ms. */
.min-hand {
/*transform: scale(0.9, 1);*/
background:white;
} /* move 6° every 60,000ms. */
.second-hand {
/*transform: scale(0.8, 0.8);*/
background:rgb(204,51,51);
} /* move 6° every 1000ms. */
.disc {
width:1em;
height:1em;
background:black;
border-radius: 1em;
position: absolute;
top:calc(50% - 0.5em);
left:calc(50% - 0.5em);
transform-origin:50% 50%;
}
.hour-disc {transform: scale(1.25);}
.min-disc {background:white;}
.second-disc {
background:rgb(204,51,51);
transform: scale(0.8);
}