A CSS-only clock showing the current time
What time is it? We can answer this question using only CSS! The demo below is a clock that shows you the current time (You can compare with your smartwatch, it's accurate!). It's a single-element implementation powered by modern CSS.
A chrome-only experimentation for now:
See the Pen What time is it? (A CSS-only clock with the current time) by Temani Afif (@t_afif) on CodePen.
Based on a clever idea by Jane Ori
More CSS Tips
- A wiggly box (wavy borders) using CSS Mask Another cool CSS shape using CSS mask and a few lines of code.
- Smoothly stop an infinite rotation Using modern CSS to stop an infinite rotation on hover.
- Overflow/scrollbar detection using modern CSS Using scroll-driven animations you can detect when an element is overflowing or has a scrollbar.
- A new way to center block elements using place-self A modern way to center block elements using place-self instead of auto margin and max-width.