💃
🕺
😀
🎸
🏆
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes discoBackground {
0% { background-color: red; }
25% { background-color: yellow; }
50% { background-color: blue; }
75% { background-color: green; }
100% { background-color: red; }
}
@keyframes rotateEmoji {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animated {
animation: discoBackground 2s infinite, rotateEmoji 4s linear infinite;
}
.emoji {
font-size: 2em;
display: inline-block;
animation: move 1s infinite alternate;
}
@keyframes move {
from { transform: translateY(0); }
to { transform: translateY(-20px); }
}
@keyframes clickEffect {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; text-align: center; overflow: hidden; position: relative;">
<div class="animated" style="width: 100%; height: 100%; position: absolute; z-index: -1;"></div>
<div style="margin-top: 60px;">
<div class="emoji" onclick="this.style.animation='clickEffect 0.5s';">💃</div>
<div class="emoji" onclick="this.style.animation='clickEffect 0.5s';">🕺</div>
<div class="emoji" onclick="this.style.animation='clickEffect 0.5s';">😀</div>
<div class="emoji" onclick="this.style.animation='clickEffect 0.5s';">🎸</div>
<div class="emoji" onclick="this.style.animation='clickEffect 0.5s';">🏆</div>
<input type="button" value="🎉 Play Music 🎉" style="font-size: 1.5em; display: block; margin: 50px auto; padding: 10px 20px;" onclick="playMusic()">
</div>
</div>
<script>
function playMusic() {
new Audio('https://www.computerhope.com/jargon/m/example.mp3').play();
}
</script>
</body>
</html>
```