diff --git a/css/style.css b/css/style.css
index af440ac..2373c15 100644
--- a/css/style.css
+++ b/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);
diff --git a/index.html b/index.html
index 389cbd6..fa3b09f 100644
--- a/index.html
+++ b/index.html
@@ -97,7 +97,15 @@
白鹿原
-
永不换档的纯净原版 Minecraft 服务器
+
+
+
+
+ 永不换档的
+
+ Minecraft 服务器
+
+
已稳定运行 0 天 0 小时 0 分 0 秒
diff --git a/js/script.js b/js/script.js
index 7490ba9..3d06596 100644
--- a/js/script.js
+++ b/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