smooth clock version-1

ronouk · ronouk · commit d20bd774840d · 2024-04-16T16:14:26.000+06:00
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!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="style.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="clock">
+
+            <div class="hand animate" style="--clr:#23b89f; --h: 45px; animation-duration: 43200s;" id="hourhand"><i></i></div>
+            <div class="hand animate" style="--clr:#49dce7; --h: 75px; animation-duration: 3600s" id="minutehand"><i></i></div>
+            <div class="hand animate" style="--clr:#e04a4a; --h: 105px; animation-duration: 60s" id="secondhand"><i></i></div>
+
+            <span style="--i:1"><b>1</b></span>
+            <span style="--i:2"><b>2</b></span>
+            <span style="--i:3"><b>3</b></span>
+            <span style="--i:4"><b>4</b></span>
+            <span style="--i:5"><b>5</b></span>
+            <span style="--i:6"><b>6</b></span>
+            <span style="--i:7"><b>7</b></span>
+            <span style="--i:8"><b>8</b></span>
+            <span style="--i:9"><b>9</b></span>
+            <span style="--i:10"><b>10</b></span>
+            <span style="--i:11"><b>11</b></span>
+            <span style="--i:12"><b>12</b></span>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,18 @@
+// using animation instead of rotation
+
+const secondsHand = document.querySelector('#secondhand');
+const minutesHand = document.querySelector('#minutehand');
+const hoursHand = document.querySelector('#hourhand');
+const now = new Date();
+
+function moveHands() {
+    const secs = now.getSeconds();
+    const mins = now.getMinutes() * 60;
+    const hours = now.getHours() * 3600;
+
+    secondsHand.style.animationDelay = '-' + secs + 's';
+    minutesHand.style.animationDelay = '-' + mins + 's';
+    hoursHand.style.animationDelay = '-' + hours + 's';
+}
+
+moveHands();
diff --git a/style.css b/style.css
@@ -0,0 +1,90 @@
+@import url('/https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: poppins, sans-serif;
+    color: #ffffff;
+}
+
+body{
+    background-color: rgba(0,0,0,0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    
+}
+
+.container{
+    position: relative;
+}
+
+.clock{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    background-color: rgba(0,0,0,0.5);
+    border: 2px solid rgba(255,255,255,0.3);
+    box-shadow: 0 0 20px 0px rgba(255,255,255,0.3);
+}
+
+.clock span{
+    position: absolute;
+    transform: rotate( calc( 30deg * var(--i)) );
+    inset: 12px;
+    text-align: center;
+    padding: 5px;
+}
+
+.clock span b{
+    transform: rotate(calc(-30deg * var(--i)));
+    display: inline-block;
+}
+
+.clock::before{
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    z-index: 2;
+}
+
+.hand{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+
+}
+
+.hand i{
+    position: absolute;
+    width: 5px;
+    height: var(--h);
+    border-radius: 10px;
+    background-color: var(--clr);
+
+}
+
+.animate{
+    animation-name: smooth-rotation;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes smooth-rotation {
+    from{
+        transform: rotate(0deg);
+    }
+
+    to{
+        transform: rotate(360deg);
+    }
+}
