feat: add loading screen with fade-out animation

Implement a loading screen that displays while page loads and gracefully fades out after 1.5 seconds. Includes CSS animations and proper cleanup to prevent interaction blocking.
2025-07-16 17:10:45 +08:00
parent c8d2026004
commit 025cd29268
3 changed files with 52 additions and 0 deletions
@@ -10,6 +10,11 @@
 </head>
 <body>

+    <!-- 加载屏幕 -->
+    <div id="loading-screen">
+        <img src="Bellaicon/Generated image.webp" alt="Loading Bella...">
+    </div>
+
    <!-- 视频背景 -->
    <div class="video-container">
        <video autoplay muted class="bg-video active" id="video1">
@@ -1,4 +1,14 @@
 document.addEventListener('DOMContentLoaded', function() {
+
+    // --- 加载屏幕处理 ---
+    const loadingScreen = document.getElementById('loading-screen');
+    setTimeout(() => {
+        loadingScreen.style.opacity = '0';
+        // 在动画结束后将其隐藏，以防它阻碍交互
+        setTimeout(() => {
+            loadingScreen.style.display = 'none';
+        }, 500); // 这个时间应该匹配 CSS 中的 transition 时间
+    }, 1500); // 1.5秒后开始淡出
    
    // 获取需要的 DOM 元素
    let video1 = document.getElementById('video1');
@@ -1,3 +1,40 @@
+/* --- 加载屏幕 --- */
+#loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    transition: opacity 0.5s ease-out;
+}
+
+#loading-screen img {
+    width: 150px; /* 或者您希望的任何尺寸 */
+    height: auto;
+    animation: pulse-loader 2s infinite;
+}
+
+@keyframes pulse-loader {
+    0% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+}
+
+
 /* --- 基本重置和全局样式 --- */
 * {
    margin: 0;