
CSS Animated Clock – Pure CSS Clock Shape – CSS Animation Effect
Clock UI Design with Animation
Clock Design Using HTML and CSS
Rotating Clock CSS3 Animation | HTML CSS
Animated Wall Clock design using HTML CSS
HTML Code
Create a clock class div and create div for every element which we are going to use.
Below is HTML file Code.
<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 Code
Use absolute CSS property to align clock middle of screen.
Assign proper height and width to clock.
Use top, left, bottom, right for marking 12, 3, 6 and 9 O’clock respectively.
Use a shadow and rotate 135 degree for giving a wall Analog Clock real feel.
Create Hour, Minute and Second clock handles.
Provide animation CSS property to each and use keyframes and rotate handles to 360 degree
Below is CSS file Code.
.clock {
position: absolute;
height: 200px;
width: 200px;
background-color: #fff;
border-radius: 100%;
border: 10px solid #34626c;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.clock .top {
position: absolute;
width: 3px;
height: 8px;
background-color: #262626;
left: 0;
right: 0;
margin: 0 auto;
}
.clock .right {
position: absolute;
width: 8px;
height: 3px;
background-color: #262626;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.clock .bottom {
position: absolute;
width: 3px;
height: 8px;
background-color: #262626;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.clock .left {
position: absolute;
width: 8px;
height: 3px;
background-color: #262626;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
.clock .center {
height: 6px;
width: 6px;
background-color: #262626;
border-radius: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.clock .shadow {
background:linear-gradient(rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.1));
height: 200px;
width: 200px;
position: absolute;
left: 60px;
top: 60px;
transform: rotate(135deg);
}
.clock .hour {
width: 3px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
animation: time 3600s infinite linear;
}
.clock .hour:before {
content: "";
height: 60px;
width: 3px;
background-color: #262626;
position: absolute;
top: 30px;
}
.clock .minute {
width: 1px;
height: 100%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
animation: time 360s infinite linear;
}
.clock .minute:before {
position: absolute;
content: "";
background-color: #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-color: #fd1111;
height: 45px;
width: 2px;
top: 45px;
}
@keyframes time {
to {
transform: rotate(360deg);
}
}
NOTE : You can use animation time as 86400s for hours, 3600s for minutes and 60s for second to create a real time clock.
Assign these numbers in .second, .minute, .hour classes in from of the “animation” property as following: .second{animation: time 86400s infinite linear;} .minute{animation: time 3600s infinite linear;} .hour{animation: time 60s infinite linear;}
Watch Below Video for Detail Understanding
Search Your Keywords
Recent Post
- Boost Your Web Design Skills: 10 CSS Tricks That Will Blow Your Mind!10 Mind-Blowing Tricks to Elevate Your Web Design Skills As a […]
- Creating Engaging Web Animations with HTML and CSS: A Simple Snake Animation ExampleAdding animations to a web page is a fantastic way to […]
- Center a div like a Pro: 4 Essential Techniques You Must Master in CSSAre you looking to center a div on your webpage and […]
- Neumorphic Design: Revolutionize Your Login Experience with Cutting-Edge TechniquesNeumorphic design has taken the web design world by storm with […]
- Neumorphic Card Design: An Elegant UI SolutionDiscover the Power of Neumorphic Card Design for Your UI If […]