Table of Contents
Clock Css Animation | Clock Animation Using Html Css Javascript
.png "Clock Css Animation | Clock Animation Using Html Css Javascript")
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.
Hello everyone. Today we are going to make an analog watch. It is easy to make digital watches, but we are challenging ourselves as a developer to make an analog watch.
We had already learned how to make a digital watch. If you want to make a digital watch first, then check our digital watch blog you will get there. Our digital watch blog.
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.
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.
The clock_second class is used for representing the second hand of the clock. The clock_minute Class is used for representing the minute hand of the clock.
<!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:-
// 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
I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.