嘘雑学セイキン😎
雑学を表示するボタンを押してください
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嘘雑学セイキン😎</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; background: #f0f8ff; border: 2px solid #00f;">
<h2 style="text-align: center; font-size: 24px;">嘘雑学セイキン😎</h2>
<div id="trivia" style="font-size: 18px; text-align: center; padding: 10px;">雑学を表示するボタンを押してください</div>
<button onclick="showRandomTrivia()" style="display: block; margin: 10px auto; padding: 10px; font-size: 18px; cursor: pointer;">
雑学を表示する
</button>
<div style="text-align: center;">
<button onclick="showRandomTrivia()" style="margin: 5px; padding: 10px; font-size: 18px; border-radius: 50%; width: 50px; height: 50px;">🎮</button>
<button onclick="showRandomTrivia()" style="margin: 5px; padding: 10px; font-size: 18px; border-radius: 50%; width: 50px; height: 50px;">🔃</button>
</div>
</div>
<script>
const triviaList = [
"セイキンは実は昔忍者だったのです！😎👍See you next time!",
"ヒカキンは猫が苦手で、犬派なんです！😎👍See you next time!",
"セイキンは一度UFOに遭遇したと噂があります！😎👍See you next time!",
"実は、セイキンは100万回以上のジャンプをしてきました！😎👍See you next time!",
"ヒカキンの動画を見ていると、IQが10アップするという研究結果が！😎👍See you next time!",
"セイキンはバナナを毎朝10本食べているらしいです！😎👍See you next time!",
"ヒカキンは寝るときは必ず逆立ちで寝ます！😎👍See you next time!",
"セイキンの動画を見ると、ストレスが50%減少する効果が！😎👍See you next time!",
"感動の嘘雑学：セイキンは一度、全世界を笑顔にしたことがある！😎👍See you next time!",
"セイキンは一度、竜巻を手で止めたことがあるらしいです！😎👍See you next time!"
];
function showRandomTrivia() {
const randomIndex = Math.floor(Math.random() * triviaList.length);
const triviaElement = document.getElementById('trivia');
triviaElement.style.animation = 'fadeIn 1s forwards';
triviaElement.innerHTML = triviaList[randomIndex];
triviaElement.classList.add('bounce');
setTimeout(() => {
triviaElement.classList.remove('bounce');
}, 1000);
}
</script>
</body>
</html>
```