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 (3)
This is wonderful
Thanks
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.