flash.moe/assets/2021.css/clock.css

116 lines
2.1 KiB
CSS
Raw Normal View History

2023-10-13 19:33:34 +00:00
.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;
}