SCSS
html, body { height: 100%; }
body {
margin: 0;
display: flex;
font-size: 1vmin;
background: linear-gradient(to bottom right, dodgerblue 50%, darken(dodgerblue, 5%) 50%);
}
$marks: #999;
.clock {
position: relative;
margin:auto;
height: 70em;
width: 70em;
border: 5em solid black;
border-radius: 50%;
background:
radial-gradient(50% 50%, black 6%, rgba(black,0) 6%),
radial-gradient(50% 50%, white 25em, rgba(white,0) 25em, rgba(white,0) 32em, white 32em),
linear-gradient(90deg, rgba($marks,0) 48%, $marks 48%, $marks 52%, rgba($marks,0) 52%) center center,
linear-gradient(0deg, rgba($marks,0) 48%, $marks 48%, $marks 52%, rgba($marks,0) 52%) center center,
linear-gradient(60deg, rgba($marks,0) 48.5%, $marks 48.5%, $marks 51.5%, rgba($marks,0) 51.5%) center center,
linear-gradient(30deg, rgba($marks,0) 48.5%, $marks 48.5%, $marks 51.5%, rgba($marks,0) 51.5%) center center,
linear-gradient(150deg, rgba($marks,0) 48.5%, $marks 48.5%, $marks 51.5%, rgba($marks,0) 51.5%) center center,
linear-gradient(120deg, rgba($marks,0) 48.5%, $marks 48.5%, $marks 51.5%, rgba($marks,0) 51.5%) center center,
white
;
box-shadow: inset 5em 3em rgba(black,0.1), 5em 3em rgba(black,0.1);
}
.clock::before,
.clock::after {
content: '';
display: block;
position: absolute;
transform-origin: 50% 100%;
}
.clock::before {
width: 3em;
height: 24em;
background-color: black;
bottom: 50%;
left: calc(50% - 1.5em);
transform: rotate(184deg);
animation: rotate 12s linear infinite;
}
.clock::after {
width: 2em;
height: 31em;
background-color: black;
bottom: 50%;
left: calc(50% - 1em);
transform: rotate(50deg);
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
