Clock / Time

HTML
<div class='clock'></div>
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); } }
JAVASCRIPT
Expand for more options Login