Feel Free To Use This Code Copy This Code To Your Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Swing Clock</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
color: #333;
}
.container {
text-align: center;
position: relative;
}
.clock {
width: 300px;
height: 300px;
border: 8px solid #333;
border-radius: 50%;
position: relative;
margin: 20px auto;
background: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.hand {
width: 50%;
height: 6px;
background: #333;
position: absolute;
top: 50%;
transform-origin: 100%;
transition: all 0.05s ease-in-out;
}
.hour {
height: 8px;
width: 35%;
}
.center {
width: 15px;
height: 15px;
background: #333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<div class="hand hour" id="hour"></div>
<div class="hand minute" id="minute"></div>
<div class="hand second" id="second"></div>
<div class="center"></div>
</div>
</div>
<script>
function setAnalogClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondHand = document.getElementById('second');
const minuteHand = document.getElementById('minute');
const hourHand = document.getElementById('hour');
const secondDegrees = ((seconds / 60) * 360) + 90;
const minuteDegrees = ((minutes / 60) * 360) + 90;
const hourDegrees = ((hours % 12 / 12) * 360) + 90;
secondHand.style.transform = `rotate(${secondDegrees}deg)`;
minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
function swingClockHands() {
const now = new Date();
const seconds = now.getSeconds();
const swingAmplitude = 10; // Angle in degrees
const swingPeriod = 2; // Time period in seconds
const swingOffset = Math.sin((seconds / swingPeriod) * (2 * Math.PI)) * swingAmplitude;
const secondHand = document.getElementById('second');
const minuteHand = document.getElementById('minute');
const hourHand = document.getElementById('hour');
secondHand.style.transform = `rotate(${(360 / 60 * now.getSeconds()) + 90 + swingOffset}deg)`;
minuteHand.style.transform = `rotate(${(360 / 60 * now.getMinutes()) + 90}deg)`;
hourHand.style.transform = `rotate(${(360 / 12 * (now.getHours() % 12)) + 90}deg)`;
}
setInterval(() => {
setAnalogClock();
swingClockHands();
}, 1000);
</script>
</body>
</html>