🎉🎈✨
🚀🌟💫
0
💀
🐱🏍🐱🚀👾
🦄🌈🎶
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes float {
0% { transform: translatey(0px); }
50% { transform: translatey(-20px); }
100% { transform: translatey(0px); }
}
@keyframes zoom {
from { transform: scale(1); }
to { transform: scale(3); }
}
.floating {
animation: float 3s infinite;
font-size: 24px;
}
.zoom {
animation: zoom 1s forwards;
}
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; text-align: center; position: relative; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); overflow: hidden;">
<div style="position: absolute; top: 10px; left: 10px;" class="floating">🎉🎈✨</div>
<div style="position: absolute; bottom: 10px; right: 10px;" class="floating">🚀🌟💫</div>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<span id="number" style="font-size: 48px; font-weight: bold; color: black; cursor: pointer;">0</span>
<div id="skull" style="font-size: 0px; margin-top: 10px;">💀</div>
</div>
<button id="clickButton" type="button" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #ffeb3b; cursor: pointer;">✨ Click Me! ✨</button>
<div style="position: absolute; top: 50%; left: 0; transform: translateY(-50%);">
<span class="floating">🐱🏍🐱🚀👾</span>
</div>
<div style="position: absolute; top: 50%; right: 0; transform: translateY(-50%);">
<span class="floating">🦄🌈🎶</span>
</div>
</div>
<script>
let count = 0;
const numberElement = document.getElementById('number');
const skullElement = document.getElementById('skull');
const clickButton = document.getElementById('clickButton');
const interval = setInterval(() => {
if (count < 44) {
count++;
numberElement.textContent = count;
if (count === 44) {
numberElement.style.color = 'red';
skullElement.style.fontSize = '48px';
skullElement.classList.add('zoom');
clickButton.style.display = 'none';
clearInterval(interval);
}
}
}, 500);
numberElement.addEventListener('click', () => {
numberElement.classList.add('shake');
setTimeout(() => {
numberElement.classList.remove('shake');
}, 500);
});
clickButton.addEventListener('click', () => {
alert('🎊 You clicked the button! 🎊');
});
</script>
</body>
</html>
```