Author: | Amitrai011 |
---|---|
Views Total: | 46 views |
Official Page: | Go to website |
Last Update: | March 30, 2023 |
License: | MIT |
Preview:

Description:
A stylish Neumorphism-style analog clock app icon written in CSS/CSS3 and a little bit of JavaScript.
How to use it:
1. The required HTML structure for the analog clock.
<div class="clock"> <div class="numbers"> <span class="twelve"><b>12</b></span> <span class="three"><b>3</b></span> <span class="six"><b>6</b></span> <span class="nine"><b>9</b></span> <div class="time hrs"><i></i></div> <div class="time min"><i></i></div> <div class="time sec"><i></i></div> </div> </div>
2. The necessary CSS styles. Copy and paste the following snippets in your project.
.clock { display: flex; justify-content: center; align-items: center; width: 250px; height: 250px; border-radius: 50px; background-color: #E5E0FF; cursor: pointer; position: relative; box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.15), inset 15px 15px 10px rgba(255, 255, 255, 0.75), -15px -15px 35px rgba(255, 255, 255, 0.55), inset -1px -1px 10px rgba(0, 0, 0, 0.2); } .clock::before { position: absolute; content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #e91e63; z-index: 2; box-shadow: 0 0 0 1px #e91e63, 0 0 0 3px #fff, 0 0 5px 5px rgba(0, 0, 0, 0.15); } .clock .numbers { position: absolute; border-radius: 50%; background-color: #152b4a; top: 35px; left: 35px; bottom: 35px; right: 35px; box-shadow: 5px 5px 15px #152b4a, inset 5px 5px 5px rgba(255, 255, 255, 0.55), -6px -6px 10px rgba(255, 255, 255, 1); } span { position: absolute; text-align: center; top: 5px; right: 5px; bottom: 5px; left: 5px; color: #fff; font-size: 1.25em; } .twelve { /* Not Mandatory */ transform: rotate(360deg); } .three { transform: rotate(90deg); } .six { transform: rotate(180deg); } .nine { transform: rotate(270deg); } b { font-weight: 700; display: block; } .three b { transform: rotate(-90deg); } .six b { transform: rotate(-180deg); } .nine b { transform: rotate(-270deg); } .clock .numbers::before { position: absolute; content: ""; top: 35px; left: 35px; bottom: 35px; right: 35px; background: linear-gradient(#2196f3, #e91e63); border-radius: 50%; animation: rotateAnimation 2s linear infinite; } .clock .numbers::after { position: absolute; content: ""; top: 38px; left: 38px; bottom: 38px; right: 38px; background: #152b4a; border-radius: 50%; } .time { position: absolute; top: 0; right: 0;; bottom: 0; left: 0; border-radius: 50%; display: flex; justify-content: center; z-index: 1; } .time i { position: absolute; width: 3px; background-color: #fff; height: 50%; transform-origin: bottom; transform: scaleY(0.55); } .hrs i { transform: scaleY(0.3); width: 4px; } .min i { transform: scaleY(0.45); } .sec i { width: 2px; transform: scaleY(0.55); background-color: #e91e63; box-shadow: 0 30px 0 #e91e63; } @keyframes rotateAnimation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
3. Update the clock using JavaScript.
const hours = document.querySelector(".hrs"); const minutes = document.querySelector(".min"); const seconds = document.querySelector(".sec"); function setTime() { let now = new Date(); let hr = now.getHours() * 30; let min = now.getMinutes() * 6; let sec = now.getSeconds() * 6; hours.style.transform = `rotateZ(${hr+(min / 12)}deg)`; minutes.style.transform = `rotateZ(${min}deg)`; seconds.style.transform = `rotateZ(${sec}deg)`; } setInterval(setTime);