Clock In HTML , CSS and JavaScript
Create an Analog Clock Using HTML, CSS and JavaScript :-
For Image and Audio:-
https://drive.google.com/drive/folders/1XEdAR2IjqpoiNg7IJwiNCP6Yqn_nR6kC?usp=sharing
Source Code :-
HTML and JS :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="clock">
<div class="outer-circle">
<img src="clock.png" alt="">
<div class="inner-circle">
<div class="clock-hand">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
</div>
</div>
</div>
<div class="shadow"></div>
</div>
<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() =>{
let day = new Date();
let hh = day.getHours()*30;
let mm = day.getMinutes()*deg;
let ss = day.getSeconds()*deg;
hr.style.transform = `rotateZ(${(hh) + (mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
<audio autoplay loop>
<source src="audio.mp3">
</audio>
</body>
</html>
CSS : -
*{
padding: 0;
margin: 0;
}
body{
background: url(aa.jpg);
background-size: cover;
}
.container{
width: 550px;
margin: 0px auto;
}
.clock{
position: relative;
top: 105px;
margin-left: 80px;
width: 395px;
height: 400px;
border-radius: 20%;
overflow: hidden;
box-shadow: 2px 0 0 #c4c5c5,
-2px 0 0 #c4c5c5,
inset 0 -40px 25px -15px rgba(255, 255, 255,0.3);
}
.clock::before{
content: '';
width: 400px;
height: 100px;
display: inline-block;
background: rgba(255, 255, 255,1);
position: absolute;
border-radius: 100%;
filter: blur(35px);
left: 50%;
margin-left: -200px;
margin-top: -30px;
}
.outer-circle{
position: relative;
width: 320px;
height: 320px;
left: 50%;
margin-left: -160px;
margin-top: 40px;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.3),
inset 0 -1px 0 rgba(0,0,0,0.2),
-3px -3px 0 #a3a3a3,
0 -5px 0 #a3a3a3,
3px -3px 0 #a3a3a3,
0 4px 0 #fff,
-3px 3px 0 #fff,
-3px 3px 0 #fff,
3px 3px 0 #fff,
inset 0 0 35px -10px rgba(0,0,0,0.7),
0 -15px 50px 7px rgba(255,255,255,0.4),
inset 0 25px 6px -10px rgba(0,0,0,0.28),
inset 0 35px 20px -2px rgba(0,0,0,0.18),
inset 0 -10px 0 rgba(0,0,0,0.4);
border-radius: 100%;
}
.outer-circle img{
position: absolute;
width: 310px;
height: 320px;
margin-left: 4px;
margin-top: 4px;
}
.inner-circle{
position: absolute;
width: 225px;
height: 225px;
background: transparent;
left: 50%;
margin-left: -112.5px;
top: 50%;
margin-top: -110px;
border-radius: 100%;
box-shadow: inset 0 1px 0 1px rgba(0,0,0,0.2),
inset 0 30px 6px -12px rgba(0,0,0,0.18),
0 1px 0 1px rgba(255, 255, 255,1),
inset 0 -1px 5px 0 rgba(0,0,0,0.5);
}
.clock-hand::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
z-index: 1000;
}
.inner-circle , .clock-hand{
display: flex;
justify-content: center;
align-items: center;
}
.hour , .min , .sec{
position: absolute;
}
.hour , .hr{
width: 160px;
height: 160px;
}
.hr:before{
content:'';
position: absolute;
width: 8px;
height: 80px;
background: #ff105c;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.min, .mn{
width: 200px;
height: 200px;
}
.mn:before{
content: '';
position: absolute;
width: 4px;
height: 90px;
background: rgb(0,255,0);
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sec , .sc{
width: 230px;
height: 230px;
}
.sc:before{
content: '';
position: absolute;
width: 2px;
height: 150px;
background: rgb(249,253,1);
z-index: 12;
border-radius: 10px 10px 0 0;
}
.hr, .mn, .sc{
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.shadow{
position: absolute;
z-index: 1;
width: 280px;
height: 25px;
background: rgba(0,0,0,0.4);
opacity: 0.5;
margin-left: 135px;
bottom: 77px;
border-radius: 100%;
filter: blur(2px);
box-shadow: rgba(0,0,0,0.2);
}
Comments
Post a Comment