```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10連ガチャ🍜</title>
<style>
@keyframes pop {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
}
.result span {
display: inline-block;
padding: 10px;
margin: 5px;
border: 1px solid black;
border-radius: 10px;
animation: pop 0.5s ease-out;
}
.result span:hover {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; overflow: hidden; position: relative; border: 2px solid black; border-radius: 10px;">
<div style="text-align: center; margin-top: 20px;">
<button onclick="roll()" style="padding: 10px 20px; font-size: 20px;">10連ガチャ!! 🎉</button>
</div>
<div id="result" class="result" style="width: 100%; height: 300px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 100px;"></div>
</div>
<script>
const items = ["🍜 バリコク豚骨ラーメン", "🍗 唐揚げ", "🍟 フライドポテト", "🍖 パーコー", "🍖 チャーシュー", "🍹 ウーロンハイ", "🍺 ビール"];
function roll() {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
for (let i = 0; i < 10; i++) {
const randomItem = items[Math.floor(Math.random() * items.length)];
const span = document.createElement('span');
span.textContent = randomItem;
resultDiv.appendChild(span);
}
}
</script>
</body>
</html>
```
