How to Create a Simple Clock with CSS only
This is a quick and straightforward tutorial showing how to do a simple, great-looking and most of all, pure CSS clock. You do not need any jQuery scripts or whatever to make it work. Have a look below and you will see.
HTML
<div class="clock"> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> <div class="center"></div> <div class="shadow"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div>
CSS
* { margin: 0; padding: 0; border: 0; } html, body { min-height: 100%; } body { background-color: #00A99E; } .clock { position: relative; height: 200px; width: 200px; background: white; box-sizing: border-box; border-radius: 100%; border: 10px solid #67D2C8; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; .top { position: absolute; width: 3px; height: 8px; background: #262626; left: 0; right: 0; margin: 0 auto; } .right { position: absolute; width: 8px; height: 3px; background: #262626; top: 0; bottom: 0; right: 0; margin: auto 0; } .bottom { position: absolute; width: 3px; height: 8px; background: #262626; left: 0; right: 0; bottom: 0; margin: 0 auto; } .left { position: absolute; width: 8px; height: 3px; background: #262626; top: 0; bottom: 0; left: 0; margin: auto 0; } .center { height: 6px; width: 6px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: #262626; border-radius: 100%; } .shadow { height: 200px; width: 200px; position: absolute; left: 60px; top: 60px; transform: rotate(135deg); background: linear-gradient(transparent, rgba(#000, 0.1)); } .hour { width: 3px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 86400s infinite linear; &:before { position: absolute; content: ""; background: #262626; height: 60px; width: 3px; top: 30px; } } .minute { width: 1px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 3600s infinite linear; &:before { position: absolute; content: ""; background: #262626; height: 40px; width: 1px; top: 50px; } } .second { width: 2px; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; animation: time 60s infinite linear; &:before { position: absolute; content: ""; background: #fd1111; height: 45px; width: 2px; top: 45px; } } } @keyframes time { to { transform: rotate(360deg); } }
SEE THE DEMO
That’s it. With simple CSS animations and styles you have a beautiful clock. You may change the colour to suit the colour palette of your project.
via MaxBoll / Original PSD by Dmitri Litvinov