Telegram Group Join Now
ADVERTISEMENT
Clock Css Animation | Clock Animation Using Html Css Javascript
ADVERTISEMENT
Welcome to today’s tutorial. Today we are going to create a Pulse Animation. For this, we are going to use HTML, CSS, and Javascript.
You need basic knowledge of CSS for this project. This tutorial is well suited for CSS intermediates. Let us get started with the project.
ADVERTISEMENT
ADVERTISEMENT
Code by | Kyle Wetton |
Project Download | Link Available Below |
Language used | HTML ,CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
Live server:-
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Minimalist Clock, Pure CSS with current time by Kyle Wetton (@kylewetton) on CodePen.
ADVERTISEMENT
HTML:-
Inside the body tag of HTML we have inserted are dev whose have class name clock and inside that clock. We have inserted 4 more divs, one for clock second, Clock minute, clock hour and clock axis.
ADVERTISEMENT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="clock">
<div class="clock__second"></div>
<div class="clock__minute"></div>
<div class="clock__hour"></div>
<div class="clock__axis"></div>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
<section class="clock__indicator"></section>
</div>
</body>
</html>
CSS:-
ADVERTISEMENT
// Options
$black: #1b1e23;
$size: 200px;
$white: #f4eed7;
$feature : #4b9aaa;
html,
body {
height: 100%;
}
body {
background: $black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: sans-serif;
color: white;
}
p {
color: $white;
font-size: 0.8em;
opacity: 0.75;
}
.clock {
height: $size;
width: $size;
border-radius: #{$size / 2};
display: flex;
justify-content: center;
position: relative;
&__second,
&__minute,
&__hour, &__indicator {
position: absolute;
left: calc(50% - 1px);
width: 2px;
background: $white;
transform-origin: bottom center;
z-index: 2;
border-radius: 1px;
}
&__second {
height: #{($size / 2) - 10};
margin-top: 10px;
background: $feature;
animation: time 60s infinite steps(60);
z-index: 3;
}
&__minute {
height: #{($size / 2) - 20};
margin-top: 20px;
opacity: 0.75;
animation: time 3600s linear infinite;
}
&__hour {
height: #{($size / 2) - 40};
margin-top: 40px;
animation: time 43200s linear infinite;
}
&__indicator {
height: #{($size / 2) - 2};
border-top: 2px solid $feature;
background: none;
}
&__indicator:nth-of-type(5n) {
opacity: 1;
height: #{($size / 2) - 7};
border-top: 7px solid $white;
}
&__axis {
background: $feature;
width: 5px;
height: 5px;
border-radius: 3px;
position: absolute;
z-index: 4;
top: #{$size / 2 - 3};
}
}
@for $i from 1 through 60 {
section:nth-of-type(#{$i}) {
transform: rotateZ(calc(6deg * #{$i}));
}
}
@keyframes time {
to {
transform: rotateZ(360deg);
}
}
JAVASCRIPT:-
var currentSec = getSecondsToday();
var seconds = (currentSec / 60) % 1;
var minutes = (currentSec / 3600) % 1;
var hours = (currentSec / 43200) % 1;
setTime(60 * seconds, "second");
setTime(3600 * minutes, "minute");
setTime(43200 * hours, "hour");
function setTime(left, hand) {
$(".clock__" + hand).css("animation-delay", "" + left * -1 + "s");
}
function getSecondsToday() {
let now = new Date();
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
let diff = now - today;
return Math.round(diff
ADVERTISEMENT
Which code editor do you use for this Clock Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this is a responsive project
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT