Analog Clock With Glassmorphism Effect By Coding

Ticker

10/recent/ticker-posts

Analog Clock With Glassmorphism Effect By Coding

AK Creative 2/08/2021 08:27:00 PM

Perfect Analog clock With Transparent Effect 


HTML Code


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Analog Clock</title>

    <link rel="stylesheet" href="css/style.css">

</head>


<body>

    <div id="container">

        <div id="cover"></div>

        <div id="clock">

            <div class="timeNumber">01</div>

            <div class="timeNumber">02</div>

            <div class="timeNumber">03</div>

            <div class="timeNumber">04</div>

            <div class="timeNumber">05</div>

            <div class="timeNumber">09</div>

            <div class="timeNumber">07</div>

            <div class="timeNumber">08</div>

            <div class="timeNumber">09</div>

            <div class="timeNumber">10</div>

            <div class="timeNumber">11</div>

            <div class="timeNumber">12</div>


           <div id="nut"></div>


           <div id="secsHand">

                <div id="seconds"></div>

            </div>

           

            <div id="minsHand">

                <div id="minutes"></div>

            </div>

          

            <div id="hrsHand">

                <div id="hours"></div>

            </div>

        </div>

    </div>

    <script src="js/main.js"></script>

</body>


</html>


CSS Code


* {

    padding: 0;

    margin: 0;

    font-family: century;

    box-sizing: border-box;

}


body {

    height: 100vh;

    width: 100%;

    background: url(https://i.pinimg.com/originals/8b/54/f8/8b54f8394a8b525cdcbcf117533f64ba.jpg) fixed;

    position: relative;

    top: 0;

    left: 0;

    display: grid;

    place-items: center;

}


#container {

    height: 600px;

    width: 600px;

    position: relative;

}


#cover {

    height: 600px;

    width: 600px;

    border-radius: 50%;

    background: transparent;

    backdrop-filter: blur(13px);

    box-shadow: inset 5px 10px 15px rgba(255, 255, 255, 0.9), inset -5px -10px 15px rgba(0, 0, 0, 0.075);

    position: absolute;

    top: 0;

    left: 0;

}


#clock,

.timeNumber,

#secsHand,

#minsHand,

#hrsHand {

    height: 600px;

    width: 600px;

    border-radius: 50%;

    position: absolute;

    top: 0;

    left: 0;

    display: grid;

    place-items: center;

}


.timeNumber {

    text-align: center;

    display: block;

    font-size: 50px;

    padding: 15px;

    color: #ff0462;

    text-shadow: 5px 1px 0px #00000085;

}


.timeNumber:nth-child(1) {

    transform: rotateZ(30deg);

}


.timeNumber:nth-child(2) {

    transform: rotateZ(60deg);

}


.timeNumber:nth-child(3) {

    transform: rotateZ(90deg);

}


.timeNumber:nth-child(4) {

    transform: rotateZ(120deg);

}


.timeNumber:nth-child(5) {

    transform: rotateZ(150deg);

}


.timeNumber:nth-child(6) {

    transform: rotateZ(180deg);

}


.timeNumber:nth-child(7) {

    transform: rotateZ(210deg);

}


.timeNumber:nth-child(8) {

    transform: rotateZ(240deg);

}


.timeNumber:nth-child(9) {

    transform: rotateZ(270deg);

}


.timeNumber:nth-child(10) {

    transform: rotateZ(300deg);

}


.timeNumber:nth-child(11) {

    transform: rotateZ(330deg);

}


.timeNumber:nth-child(12) {

    transform: rotateZ(360deg);

}


#nut {

    height: 25px;

    width: 25px;

    background: linear-gradient(200deg, #ffe259, #c6ffde6e, #f7797d);

    box-shadow: inset 2px 3px 4px #rgba(255, 255, 255, 0.5), inset -2px -3px 4px rgba(0, 0, 0, 0.02);

    border-radius: 50%;

    z-index: 999;

}


#secsHand,

#minsHand,

#hrsHand {

    display: flex;

    justify-content: center;

}


#secsHand #seconds,

#minsHand #minutes,

#hrsHand #hours {

    height: 220px;

    width: 15px;

    background: linear-gradient(#12c74e 10%, #ffffff33);

    box-shadow: inset 2px 3px 2px rgba(255, 255, 255, 0.2), inset -2px -3px 2px rgba(0, 0, 0, 0.2);

    border-radius: 10px 10px 0 0;

    position: absolute;

    top: 80px;

}


#minsHand #minutes {

    height: 180px;

    top: 120px;

    background: linear-gradient(#e2f247 10%, #ff00ff33);

}


#hrsHand #hours {

    height: 140px;

    top: 160px;

    background: linear-gradient(#dfae00 10%, #ff44ff33);

}


JavaScript Code


let secsHand = document.querySelector("#secsHand");

let minsHand = document.querySelector("#minsHand");

let hrsHand = document.querySelector("#hrsHand");


setInterval(() => {

    let time = new Date();

    // 360deg / 60 seconds = 6

    // 360deg / 60 minutes = 6

    // 360deg / 12 hours = 30

    

    let sec = time.getSeconds() * 6;

    let min = time.getMinutes() * 6;

    let hr = time.getHours() * 30;


    secsHand.style.transform = `rotateZ(${sec}deg)`;

    minsHand.style.transform = `rotateZ(${min}deg)`;

    hrsHand.style.transform = `rotateZ(${hr}deg)`;

}, 1000);


Analog Clock



Tags:

Post a Comment

15 Comments