It is an analog clock that can be used to adjust the time and its hour needles are marked by numbers from 1 to 12 which you will easily learn to make an animation clock.
CSS Animation Clock Design Using Html And CSS Source Codes
We know about the HTML code of Animation Clock. To create this clock, a div is taken inside the body tag whose class name is wrapper, the ul tag is taken inside this div and this ul tag is called unorder list. Is used for the list and fifteen li tags are taken of this ul li class is given from class number one to twelve inside which numbers from 1 to 12 are written.
li The class names of the three li tags below twelve have been given a different name, whose class name is as follows: hour minute and second class hour were written as the hour of this clock with the smallest needle in the hour and the minute of the class minute. Is written for the needle and after that the second is written for the second needle
You know about the css style of the animation clock. By zeroing the page margin and padding, the tags of html take up space according to their own. To remove that space, zero margin and padding have to be zero, after that the class wrapper. Gave the property of width height background-color and font-family that you see in the image above, after this id clock is also styled by giving widht height and background-color other property
This clock is styled the needle only with the css animation, so that the clock needle rotates 360 degrees, which you are seeing in the image, you are in the beginning and you are learning html and css, then you have this type of design for you It will be very helpful to learn how to design this type of clock from html and css.
Video Tutorial of CSS Animation Clock Design
If you have understood this animation clock, I mean to say that you like this clock, then you can get its source code, so if you want to get this code then below is given two files html or CSS Scroll and copy the file and paste it into your file.
HTML CODE FILE :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="clock.css" rel="stylesheet">
</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>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
width: 100%;
background-color: #25283D;
font-family: 'Josefin Sans', sans-serif;
float: left;
}
#clock {
width: 280px;
height: 280px;
background: #25283D;
border: 18px solid #1e213a;
border-radius: 50%;
margin: 200px auto 60px;
position: relative;
box-shadow: inset 0 5px 25px #00000080,
0 5px 25px #00000080,
0 5px 30px #00000080,
0 5px 35px #00000080,
0 5px 40px #00000080,
0 5px 45px #00000080;
}
#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: #FD2E62;
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: #bed4fd;
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: #07f3dfb4;
position: absolute;
left: calc(50% - 4px);
top: 50%;
box-shadow: 1px 0 4px #00000026;
}
@keyframes sec {
to {
transform: rotate(360deg);
}
}
Post a Comment