feat: implement dynamic subtitle rotation in hero section

css/style.css

@@ -172,6 +172,46 @@ body {
     text-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }
 
+.hero-subtitle-container {
+    margin-bottom: 15px;
+}
+
+.subtitle-prefix, .subtitle-suffix {
+    white-space: nowrap;
+}
+
+.subtitle-dynamic {
+    white-space: nowrap;
+    margin: 0 8px;
+    position: relative;
+    display: inline-block;
+    min-width: 40px;
+    text-align: center;
+}
+
+/* Fade animation for dynamic subtitle */
+.fade-enter {
+    opacity: 0;
+    transform: translateY(10px);
+}
+
+.fade-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.fade-exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.fade-exit-active {
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
 .server-runtime {
     font-size: 18px;
     color: rgba(255, 255, 255, 0.85);

index.html

@@ -97,7 +97,15 @@
         <div class="hero-overlay"></div>
         <div class="hero-content">
             <h1 class="hero-title">白鹿原</h1>
-            <p class="hero-subtitle">永不换档的纯净原版 Minecraft 服务器</p>
+            
+            <!-- Dynamic Subtitle with Rotating Descriptors -->
+            <div class="hero-subtitle-container">
+                <p class="hero-subtitle">
+                    <span class="subtitle-prefix">永不换档的</span>
+                    <span class="subtitle-dynamic" id="dynamic-subtitle"></span>
+                    <span class="subtitle-suffix">Minecraft 服务器</span>
+                </p>
+            </div>
             
             <div class="server-runtime">
                 已稳定运行 <span id="runtime-days">0</span> 天 <span id="runtime-hours">0</span> 小时 <span id="runtime-minutes">0</span> 分 <span id="runtime-seconds">0</span> 秒

js/script.js

@@ -22,8 +22,46 @@ function copyIp() {
     });
 }
 
+// Dynamic Subtitle Rotation
+const SUBTITLES = [
+    '纯净',
+    '原版',
+    '生存',
+    '养老',
+    '休闲'
+];
+
+let currentSubtitleIndex = 0;
+
+function initDynamicSubtitle() {
+    const dynamicElement = document.getElementById('dynamic-subtitle');
+    if (!dynamicElement) return;
+    
+    // Set initial subtitle
+    dynamicElement.textContent = SUBTITLES[0];
+    dynamicElement.classList.add('fade-enter-active');
+    
+    // Start rotation
+    setInterval(() => {
+        // Fade out
+        dynamicElement.classList.remove('fade-enter-active');
+        dynamicElement.classList.add('fade-exit-active');
+        
+        setTimeout(() => {
+            // Change text
+            currentSubtitleIndex = (currentSubtitleIndex + 1) % SUBTITLES.length;
+            dynamicElement.textContent = SUBTITLES[currentSubtitleIndex];
+            
+            // Fade in
+            dynamicElement.classList.remove('fade-exit-active');
+            dynamicElement.classList.add('fade-enter-active');
+        }, 500);
+    }, 4000); // Change every 4 seconds
+}
+
 // Sponsors Logic
 document.addEventListener('DOMContentLoaded', () => {
+    initDynamicSubtitle();
     fetchSponsors();
     fetchCrowdfunding();
     // setupModal(); // Removed, modal is gone