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.

Pure CSS Clock

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.

Related post:  Flat Buttons with Animated Hover Effects

via MaxBoll / Original PSD by Dmitri Litvinov

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close