In this article, we will learn how to create Analog Clock with using only HTML & CSS. Earlier in this blog, I have shared a couple of animation, but here in this blog, I am going to create a nice-looking Analog Clock only with HTML and CSS. Apart from this, I have shared many Neumorphism design in my blog. Please make sure to check those as well.
CSS Animation:
An animation we could an element steadily alternate from one style to every other. You can change as many css residences you want, as usually as you need. To apply css animation, you have to first specify some keyframes for the animation. Keyframes preserve what patterns the detail can have at positive instances.
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element.
You may like this:
An analog clock is a tool for studying the time of day. The shortest hand indicates the hour, a longer hand suggests the mins, and the longest arm suggests the seconds. Some analog clocks have only two arms: the shorter hand indicating the hour and the longer hand indicating the minutes.
Source Code:
If you like this Analog Clock, then feel free to use it in your project. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clock | By Code Info</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<ul id="clock">
<li class="numbers"><span>1</span></li>
<li class="numbers"><span>2</span></li>
<li class="numbers"><span>3</span></li>
<li class="numbers"><span>4</span></li>
<li class="numbers"><span>5</span></li>
<li class="numbers"><span>6</span></li>
<li class="numbers"><span>7</span></li>
<li class="numbers"><span>8</span></li>
<li class="numbers"><span>9</span></li>
<li class="numbers"><span>10</span></li>
<li class="numbers"><span>11</span></li>
<li class="numbers"><span>12</span></li>
<li id="hour"></li>
<li id="minute"></li>
<li id="second"></li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
width: 100%;
background-color: blueviolet;
font-family: "Josefin Sans", sans-serif;
float: left;
}
#clock {
width: 280px;
height: 280px;
background: #25283d;
border: 18px solid black;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
#clock:before {
content: "";
position: absolute;
width: 280px;
height: 280px;
left: -18px;
top: -10px;
border: 18px solid #cccccc;
border-radius: 50%;
z-index: -2;
}
#clock:after {
content: "";
width: 18px;
height: 18px;
background: #c7d8f8;
position: absolute;
border-radius: 50%;
left: calc(50% - 9px);
top: calc(50% - 9px);
box-shadow: 0 2px 4px #00000026;
}
#clock li {
list-style-type: none;
position: absolute;
}
.numbers {
position: absolute;
width: 90%;
height: 90%;
padding: 5%;
text-align: center;
}
.numbers span {
display: block;
color: #dbe7fd;
font-size: 38px;
text-shadow: 0 5px 18px #00000026, 0 2px 3px #00000033;
}
.numbers:nth-child(1) {
transform: rotate(30deg);
}
.numbers:nth-child(1) span {
transform: rotate(-30deg);
}
.numbers:nth-child(2) {
transform: rotate(60deg);
}
.numbers:nth-child(2) span {
transform: rotate(-60deg);
}
.numbers:nth-child(3) {
transform: rotate(90deg);
}
.numbers:nth-child(3) span {
transform: rotate(-90deg);
}
.numbers:nth-child(4) {
transform: rotate(120deg);
}
.numbers:nth-child(4) span {
transform: rotate(-120deg);
}
.numbers:nth-child(5) {
transform: rotate(150deg);
}
.numbers:nth-child(5) span {
transform: rotate(-150deg);
}
.numbers:nth-child(6) {
transform: rotate(180deg);
}
.numbers:nth-child(6) span {
transform: rotate(-180deg);
}
.numbers:nth-child(7) {
transform: rotate(210deg);
}
.numbers:nth-child(7) span {
transform: rotate(-210deg);
}
.numbers:nth-child(8) {
transform: rotate(240deg);
}
.numbers:nth-child(8) span {
transform: rotate(-240deg);
}
.numbers:nth-child(9) {
transform: rotate(270deg);
}
.numbers:nth-child(9) span {
transform: rotate(-270deg);
}
.numbers:nth-child(10) {
transform: rotate(300deg);
}
.numbers:nth-child(10) span {
transform: rotate(-300deg);
}
.numbers:nth-child(11) {
transform: rotate(330deg);
}
.numbers:nth-child(11) span {
transform: rotate(-330deg);
}
#second {
width: 100%;
height: 100%;
animation: sec 60s steps(60, end) infinite;
}
#second:after {
content: "";
width: 4px;
height: 107px;
border-radius: 2px;
background: red;
position: absolute;
left: calc(50% - 2px);
top: 55px;
box-shadow: 1px 2px 3px #00000026;
}
#minute {
width: 100%;
height: 100%;
animation: sec 3600s steps(60, end) infinite;
}
#minute:after {
content: "";
width: 8px;
height: 79px;
border-radius: 4px 4px 2px 2px;
background: gray;
position: absolute;
left: calc(50% + 30px);
top: 29%;
transform: rotate(-120deg);
box-shadow: -1px 0 5px #00000026;
}
#hour {
width: 100%;
height: 100%;
transform: rotate(120deg);
}
#hour:after {
content: "";
width: 12px;
height: 65px;
border-radius: 6px 6px 3px 3px;
background: orange;
position: absolute;
left: calc(50% - 4px);
top: 50%;
box-shadow: 1px 0 4px #00000026;
}
@keyframes sec {
to {
transform: rotate(360deg);
}
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
