🎥📺 YouTube チャンネル登録者メーター 🚀🤩
0 📈
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTubeチャンネル登録者メーター</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 5px solid black; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<div style="font-size: 24px; margin-bottom: 20px; text-align: center;">🎥📺 YouTube チャンネル登録者メーター 🚀🤩</div>
<div id="subscriber-count" style="font-size: 48px; font-weight: bold; animation: bounce 2s infinite; text-align: center;">0 📈</div>
<input type="button" value="増加 📈" onclick="incrementIncreaseRate()" style="font-size: 24px; margin-top: 20px; padding: 10px; width: 80%; border-radius: 20px; cursor: pointer; animation: fade-in 2s;">
</div>
<script>
let subscriberCount = 0;
let increaseRate = 3;
function updateSubscribers() {
subscriberCount += increaseRate;
document.getElementById('subscriber-count').innerHTML = `${subscriberCount} 📈`;
}
function incrementIncreaseRate() {
increaseRate += 1;
const reaction = document.createElement('div');
reaction.innerHTML = '📈😄✨';
reaction.style.position = 'absolute';
reaction.style.animation = 'fade-in 1s forwards';
reaction.style.top = Math.random() * 400 + 'px';
reaction.style.left = Math.random() * 400 + 'px';
document.body.appendChild(reaction);
setTimeout(() => {
reaction.remove();
}, 1000);
}
setInterval(updateSubscribers, 10000);
</script>
</body>
</html>
```