Learn how to design a clock with HTML and CSS. Add hour and minute hands to create a functional clock with CSS animation.
Table of Contents
A clock shape with minute and hour hands is a visual representation of a clock or timepiece, typically displayed on a screen. It consists of a circular shape that represents the clock face, with two hands pointing to the current time. The shorter hand, known as the minute hand, points to the current minute, while the longer hand, known as the hour hand, points to the current hour.
This is a pure CSS clock shape. It uses CSS animations and shapes, without any images or JavaScript. It's only a clock shape, not a real-time working clock.
Watch more tutorials on my YouTube Channel: Watch Here.
Let's start making an amazing clock shape with a minute and hour hand using HTML and Pure CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our clock shape.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our clock shape and clock hands. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our clock an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
margin: 0;
padding: 0;
background: #fff;
}
.clock{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 15px solid #8a5fff;
border-radius: 50%;
background: url(face.png);
background-size: cover;
box-shadow: -2px 2px 0 #e23232,
inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.clock::before{
content: '';
position: absolute;
left: 50%;
width: 40%;
height: 6px;
background: #262626;
top: calc(50% - 3px);
border-radius: 3px;
animation: animate 4s linear infinite;
transform-origin: left;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.clock::after{
content: '';
position: absolute;
left: 50%;
width: 30%;
top: calc(50% - 3px);
border-radius: 3px;
height: 6px;
background: #262626;
animation: anime 60s linear infinite;
transform-origin: left;
}
@keyframes anime {
0%{
transform: rotate(-90deg);
}
100%{
transform: rotate(270deg);
}
}
span{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #ff5f5f;
border-radius: 50%;
z-index: 1;
} Final Output:
Conclusion:
In conclusion, creating a clock with hour and minute hands using HTML and CSS is a fun and practical project for beginner-level web developers. By following the steps outlined in this tutorial, you can design and customize your own clock with unique styles and animations. With further practice and experimentation, you can improve your HTML and CSS skills and apply them to other projects. So why not give it a try and create your own clock today!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
