116 lines
2.1 KiB
CSS
116 lines
2.1 KiB
CSS
|
.clock {
|
||
|
width: 200px;
|
||
|
height: 200px;
|
||
|
border-radius: 100%;
|
||
|
border: 4px solid #c0c0c0;
|
||
|
overflow: hidden;
|
||
|
box-sizing: content-box;
|
||
|
filter: drop-shadow(0 1px 5px #000);
|
||
|
}
|
||
|
.clock-background {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
background-color: #fffd;
|
||
|
filter: blur(20px);
|
||
|
}
|
||
|
.clock-center {
|
||
|
position: absolute;
|
||
|
top: 96px;
|
||
|
left: 96px;
|
||
|
width: 8px;
|
||
|
height: 8px;
|
||
|
background-color: #000;
|
||
|
border-radius: 100%;
|
||
|
z-index: 1000;
|
||
|
}
|
||
|
.clock-hand {
|
||
|
--hand-rotation: 0deg;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
transform: rotate(var(--hand-rotation));
|
||
|
z-index: 900;
|
||
|
}
|
||
|
.clock-hand-display {
|
||
|
position: absolute;
|
||
|
width: 2px;
|
||
|
left: 99px;
|
||
|
height: 99px;
|
||
|
background-color: #000;
|
||
|
}
|
||
|
.clock-hand-hours {
|
||
|
z-index: 910;
|
||
|
}
|
||
|
.clock-hand-minutes {
|
||
|
z-index: 920;
|
||
|
}
|
||
|
.clock-hand-seconds {
|
||
|
z-index: 930;
|
||
|
}
|
||
|
.clock-hand-hours .clock-hand-display {
|
||
|
height: 70px;
|
||
|
margin-top: 30px;
|
||
|
filter: drop-shadow(0 1px 2px #000);
|
||
|
}
|
||
|
.clock-hand-minutes .clock-hand-display {
|
||
|
height: 80px;
|
||
|
margin-top: 20px;
|
||
|
filter: drop-shadow(0 1px 3px #000);
|
||
|
}
|
||
|
.clock-hand-seconds .clock-hand-display {
|
||
|
height: 100px;
|
||
|
margin-top: 15px;
|
||
|
opacity: .6;
|
||
|
background-color: #f00;
|
||
|
filter: drop-shadow(0 1px 4px #000);
|
||
|
}
|
||
|
.clock-number {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
z-index: 500;
|
||
|
width: 100px;
|
||
|
height: 100px;
|
||
|
}
|
||
|
.clock-number-display {
|
||
|
position: absolute;
|
||
|
width: 2px;
|
||
|
height: 10px;
|
||
|
background-color: #000;
|
||
|
}
|
||
|
.clock-number-9 .clock-number-display,
|
||
|
.clock-number-3 .clock-number-display {
|
||
|
width: 10px;
|
||
|
height: 2px;
|
||
|
}
|
||
|
.clock-number-6 .clock-number-display {
|
||
|
bottom: 0;
|
||
|
}
|
||
|
.clock-number-12 .clock-number-display {
|
||
|
right: 0;
|
||
|
height: 15px;
|
||
|
}
|
||
|
.clock-number-3 .clock-number-display {
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
}
|
||
|
.clock-number-12 {
|
||
|
left: 1px;
|
||
|
}
|
||
|
.clock-number-9 {
|
||
|
top: 99px;
|
||
|
}
|
||
|
.clock-number-6 {
|
||
|
top: 100px;
|
||
|
left: 99px;
|
||
|
}
|
||
|
.clock-number-3 {
|
||
|
top: 1px;
|
||
|
left: 100px;
|
||
|
}
|