🌟
🎈
🎉
✨
🎁
🎂
🥳
🎊
🕑
⏰
✨✨
🌟🎇
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes rotateHand {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
</head>
<body>
<div id="clock" style="width:400px; height:400px; position:relative; margin:auto; border:5px solid #FFD700; border-radius:50%; background: #FFF8DC; overflow:hidden;">
<!-- Emojis around the clock face -->
<div style="position:absolute; top:10%; left:50%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite;">🌟</div>
<div style="position:absolute; top:25%; left:75%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.2s;">🎈</div>
<div style="position:absolute; top:50%; left:90%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.4s;">🎉</div>
<div style="position:absolute; top:75%; left:75%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.6s;">✨</div>
<div style="position:absolute; top:90%; left:50%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.8s;">🎁</div>
<div style="position:absolute; top:75%; left:25%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 1s;">🎂</div>
<div style="position:absolute; top:50%; left:10%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 1.2s;">🥳</div>
<div style="position:absolute; top:25%; left:25%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 1.4s;">🎊</div>
<!-- Second hand -->
<div id="secondHand" style="position:absolute; width:4px; height:40%; background:red; top:50%; left:50%; transform-origin:bottom center; transform:rotate(0deg);">
<span style="position:absolute; top:-20px; left:-8px; font-size:24px;">🕑</span>
</div>
<!-- Center emoji -->
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:32px; cursor:pointer;">⏰</div>
<!-- Sparkle emojis -->
<div style="position:absolute; top:20%; left:40%; transform:translate(-50%, -50%); font-size:20px; animation: sparkle 1.5s infinite;">✨✨</div>
<div style="position:absolute; top:60%; left:60%; transform:translate(-50%, -50%); font-size:20px; animation: sparkle 1.5s infinite 0.5s;">🌟🎇</div>
</div>
<!-- Start button for smartphone -->
<input type="button" value="🎮 Start" id="startButton" style="display:none; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); padding:10px 20px; font-size:16px; cursor:pointer; border: none; background-color: #FFD700; border-radius:5px; box-shadow: 0 4px #999;">
<script>
const secondHand = document.getElementById('secondHand');
const startButton = document.getElementById('startButton');
const clock = document.getElementById('clock');
const centerEmoji = clock.querySelector('div:nth-child(9)');
// Detect if it's a touch device
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints;
if(isTouchDevice){
startButton.style.display = 'block';
// Initial state: second hand not rotated
secondHand.style.animation = 'none';
// On click of start button, start the rotation
startButton.addEventListener('click', () => {
secondHand.style.animation = 'rotateHand 5s linear forwards, pop 0.5s';
});
} else {
// For PC, start the rotation automatically
secondHand.style.animation = 'rotateHand 5s linear forwards, pop 0.5s';
}
// Add click event to clock for animations
clock.addEventListener('click', () => {
// Trigger pop animation on center emoji
centerEmoji.style.animation = 'pop 0.3s';
// Remove animation after it completes to allow re-trigger
centerEmoji.addEventListener('animationend', () => {
centerEmoji.style.animation = '';
}, { once: true });
// Add a sparkle on click
const sparkle = document.createElement('div');
sparkle.textContent = '✨';
sparkle.style.position = 'absolute';
sparkle.style.top = Math.random() * 100 + '%';
sparkle.style.left = Math.random() * 100 + '%';
sparkle.style.fontSize = '20px';
sparkle.style.animation = 'pop 0.5s forwards';
clock.appendChild(sparkle);
sparkle.addEventListener('animationend', () => {
sparkle.remove();
});
});
</script>
</body>
</html>