HTML: (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glassmorphism Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<img src="clock template.svg" alt="clock_img">
<div class="hour hand" id="hour"></div>
<div class="minute hand" id="minute"></div>
<div class="seconds hand" id="seconds"></div>
</div>
<script>
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var set_clock = setInterval(function clock(){
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
var calc_hr = (hr * 30) + (min / 2);
var calc_min = (min * 6) + (sec / 10);
var calc_sec = sec*6;
hour.style.transform = 'rotate(' + calc_hr + "deg)";
minute.style.transform = 'rotate(' + calc_min + 'deg)';
seconds.style.transform = 'rotate(' + calc_sec + 'deg)';
}, 1000);
</script>
</body>
</html>
CSS (style.css)
body{
padding: 0;
margin: 0;
background: url(background.png) no-repeat center center fixed;
background-size: cover;
}
.clock{
height: 320px;
width: 320px;
background-color: rgba(255,255,255,0.06);
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
backdrop-filter: blur(20px);
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 10px 10px 35px rgba(0,0,0,0.25);
}
img{
opacity: 0.6;
}
.hand{
position: absolute;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(20px);
margin: auto;
left: 0;
right: 0;
border-radius: 5px;
transform-origin: bottom;
}
.hour{
height: 60px;
width: 10px;
top: 100px;
}
.minute{
height: 80px;
width: 5px;
top: 80px;
}
.seconds{
height: 90px;
width: 3px;
top: 70px;
}
HTML+CSS+JS
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glassmorphism Clock</title>
</head>
<body>
<div class="clock">
<img src="clock template.svg" alt="clock_img">
<div class="hour hand" id="hour"></div>
<div class="minute hand" id="minute"></div>
<div class="seconds hand" id="seconds"></div>
</div>
<script>
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");
var set_clock = setInterval(function clock(){
var date_now = new Date();
var hr = date_now.getHours();
var min = date_now.getMinutes();
var sec = date_now.getSeconds();
var calc_hr = (hr * 30) + (min / 2);
var calc_min = (min * 6) + (sec / 10);
var calc_sec = sec*6;
hour.style.transform = 'rotate(' + calc_hr + "deg)";
minute.style.transform = 'rotate(' + calc_min + 'deg)';
seconds.style.transform = 'rotate(' + calc_sec + 'deg)';
}, 1000);
</script>
</body>
<style>
body{
padding: 0;
margin: 0;
background: url(background.png) no-repeat center center fixed;
background-size: cover;
}
.clock{
height: 320px;
width: 320px;
background-color: rgba(255,255,255,0.06);
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
backdrop-filter: blur(20px);
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 10px 10px 35px rgba(0,0,0,0.25);
}
img{
opacity: 0.6;
}
.hand{
position: absolute;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(20px);
margin: auto;
left: 0;
right: 0;
border-radius: 5px;
transform-origin: bottom;
}
.hour{
height: 60px;
width: 10px;
top: 100px;
}
.minute{
height: 80px;
width: 5px;
top: 80px;
}
.seconds{
height: 90px;
width: 3px;
top: 70px;
}
</style>
</html>
Download Code created by Coding Artist Web
Comments
Post a Comment