🎈🌟 こんにちは！ 🌟🎈
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>🎉✨ Eカード ✨🎉</title>
<style>
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes sparkle {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); overflow: hidden; border-radius: 20px;">
<div style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 24px; animation: sparkle 2s infinite;">
🎈🌟 こんにちは！ 🌟🎈
</div>
<div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
<button onclick="celebrate()" style="padding: 10px 20px; font-size: 16px; border: none; border-radius: 10px; background-color: #ff6f61; color: white; cursor: pointer; animation: bounce 2s infinite;">
🎉 クリックして祝おう！ 🎉
</button>
</div>
<div id="emoji-container" style="position: absolute; width: 100%; height: 100%;">
<!-- Emojis will appear here -->
</div>
</div>
<script>
function celebrate() {
const container = document.getElementById('emoji-container');
for(let i=0; i<20; i++) {
const emoji = document.createElement('div');
emoji.textContent = '✨';
emoji.style.position = 'absolute';
emoji.style.left = Math.random() * 100 + '%';
emoji.style.top = '0px';
emoji.style.fontSize = '24px';
emoji.style.animation = `float ${Math.random() * 3 + 2}s ease-in-out forwards`;
emoji.style.opacity = Math.random();
container.appendChild(emoji);
setTimeout(() => {
emoji.remove();
}, 5000);
}
}
</script>
</body>
</html>
```