DEV Community

Cover image for Cool CSS clock without Javascript
Stokry
Stokry

Posted on

Cool CSS clock without Javascript

#css #showdev #webdev #html

Today I want to show you how can you create a pure CSS clock without any Javascript.

First, What Is CSS Animation?
CSS animation is a proposed module for Cascading Style Sheets that allows designers and developers to add animations by editing the CSS code of their websites.

Let's jump to the code:

 <div class="clock"> <div class="twelve"></div> <div class="three"></div> <div class="six"></div> <div class="nine"></div> <div class="center"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div>
Enter fullscreen mode Exit fullscreen mode

And little bit of CSS:

 body { background-color: #0a192f; } .clock { position: relative; height: 200px; width: 200px; background: white; box-sizing: border-box; border-radius: 100%; border: 20px solid #ffde64; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .clock .twelve { position: absolute; width: 6px; height: 8px; background: #262626; left: 0; right: 0; margin: 0 auto; } .clock .three { position: absolute; width: 8px; height: 3px; background: #262626; top: 0; bottom: 0; right: 0; margin: auto 0; } .clock .six { position: absolute; width: 6px; height: 8px; background: #262626; left: 0; right: 0; bottom: 0; margin: 0 auto; } .clock .nine { position: absolute; width: 8px; height: 3px; background: #262626; top: 0; bottom: 0; left: 0; margin: auto 0; } .clock .center { height: 6px; width: 6px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: #262626; border-radius: 100%; } .clock .hour { width: 3px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 60s infinite linear; } .clock .hour:before { position: absolute; content: ""; background: #262626; height: 60px; width: 3px; top: 30px; } .clock .minute { width: 1px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 30s infinite linear; } .clock .minute:before { position: absolute; content: ""; background: #262626; height: 40px; width: 1px; top: 50px; } .clock .second { width: 2px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 15s infinite linear; } .clock .second:before { position: absolute; content: ""; background: #fd1111; height: 45px; width: 2px; top: 45px; } @keyframes time { to { transform: rotate(360deg); } }
Enter fullscreen mode Exit fullscreen mode

This is our result:

enter image description here

Thank you all.

Top comments (4)

Collapse
 
gary_freeman_91a6e0c58c85 profile image
Gary Freeman •

Very cool! I've been fascinated with CSS clocks lately and I am especially impressed with Nixie clocks.

I wanted to re-create the Nixie aesthetic from the 50s to 70s.

A Nixie clock displays time using glass tubes filled with neon gas, where numbers glow orange-red. Each digit needs its own tube containing stacked metal numbers. Popular in the 1950s-70s, these high-voltage displays are now mostly collectibles,

prized for their retro-futuristic aesthetic.

You can check it out at gnixie.websitescaffolding.com

Collapse
 
blaqcodr profile image
Alwell Ogolo Sokari •

This is wonderful

Collapse
 
stokry profile image
Stokry •

Thanks

Collapse
 
maxim-bordyug profile image
Maxim Bordyug •

Thank you. Your article helped me significantly with my homework. I couldn’t figure out how to make the clock hands rotate in the center.