🎈
✨
🎉
🌟
💫
🔵
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes float {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
@keyframes popIn {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes grow {
from { transform: scale(1); }
to { transform: scale(1.5); }
}
@keyframes buttonClick {
0% { transform: scale(1); }
50% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.animate-float {
animation: float 3s linear infinite;
}
.animate-popin {
animation: popIn 0.5s forwards;
}
.animate-grow {
animation: grow 0.5s forwards;
}
.animate-click {
animation: buttonClick 0.3s;
}
.emoji {
position: absolute;
font-size: 24px;
user-select: none;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container" style="width: 400px; height: 400px; position: relative; margin: auto; background-color: #f0f8ff; overflow: hidden;">
<!-- Floating Emojis -->
<div class="emoji animate-float" style="left: 10%; top: 10%;">🎈</div>
<div class="emoji animate-float" style="left: 80%; top: 20%;">✨</div>
<div class="emoji animate-float" style="left: 50%; top: 5%;">🎉</div>
<div class="emoji animate-float" style="left: 30%; top: 15%;">🌟</div>
<div class="emoji animate-float" style="left: 70%; top: 25%;">💫</div>
<!-- START Button -->
<input type="button" id="startButton" value="START 🚀🎊" onclick="startGame()" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 120px; height: 50px; font-size: 18px; cursor: pointer; border: none; border-radius: 10px; background-color: #ff69b4; color: white; box-shadow: 0 4px #999;">
<!-- Animated Ball -->
<div id="ball" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; font-size: 40px;">🔵</div>
</div>
<script>
function startGame() {
var startButton = document.getElementById('startButton');
startButton.classList.add('animate-click');
setTimeout(function(){
startButton.classList.remove('animate-click');
}, 300);
// Clear previous ball state
var ball = document.getElementById('ball');
ball.style.opacity = 0;
ball.style.transform = "translate(-50%, -50%) scale(0)";
ball.classList.remove('animate-popin', 'animate-grow');
// Show blue ball after 1 second
setTimeout(function(){
ball.innerHTML = "🔵";
ball.style.opacity = 1;
ball.style.transform = "translate(-50%, -50%) scale(1)";
ball.classList.add('animate-popin');
// Change to green ball after 1.5 seconds
setTimeout(function(){
ball.innerHTML = "🟢";
ball.classList.remove('animate-popin');
ball.classList.add('animate-grow');
}, 1500);
}, 1000);
}
// Add click animation to START button
var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function() {
// Create pop-up emojis on click
var emojis = ['😀','😂','🥳','😎','🤩'];
var emoji = emojis[Math.floor(Math.random() * emojis.length)];
var popEmoji = document.createElement('div');
popEmoji.className = 'emoji';
popEmoji.style.left = startButton.style.left;
popEmoji.style.top = '50%';
popEmoji.style.transform = 'translate(-50%, -50%)';
popEmoji.innerHTML = emoji;
document.getElementById('container').appendChild(popEmoji);
// Animate and remove the pop-up emoji
setTimeout(function(){
popEmoji.style.transition = "transform 1s, opacity 1s";
popEmoji.style.transform = "translate(-50%, -150%) scale(2)";
popEmoji.style.opacity = 0;
setTimeout(function(){
popEmoji.remove();
}, 1000);
}, 10);
});
</script>
</body>
</html>
```