Making A Real Time Clock Using HTML and CSS.|| Without JS Only HTML and ...
Copy HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
</head>
<body>
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
</html>
Copy CSS file:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#clock{
height: 470px;
width: 475px;
background-image: url(clock.jpg);
background-size: 100% 100%;
position: relative;
margin: auto;
background-color: red;
}
.hour, .minute, .second{
position: relative;
border-radius: 10px;
transform-origin: bottom;
}
.hour{
position: fixed;
width: 1%;
animation: 43200s hour linear infinite;
margin-left: 232px;
height: 15%;
margin-top: 125px;
opacity: 0.8;
background-color: black;
}
.minute{
position: fixed;
width: 1%;
animation: 3600s minute linear infinite;
margin-left: 232px;
height: 20%;
margin-top: 95px;
opacity: 0.8;
background-color: black;
}
.second{
position: fixed;
width: 1%;
animation: 60s second linear infinite;
margin-left: 232px;
height: 25%;
margin-top: 45px;
opacity: 0.8;
background-color: black;
}
@keyframes hour{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes minute{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes second{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
For Image of Clock
Comments
Post a Comment