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>

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);
    }
}

This is our result:

Thank you all.

Top comments (4)

Gary Freeman • Nov 29

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