From 025cd29268216a25082084c850985f406cb60a1d Mon Sep 17 00:00:00 2001
From: F04C <israeldarrel01@gmail.com>
Date: Wed, 16 Jul 2025 17:10:45 +0800
Subject: [PATCH] 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.
---
 index.html |  5 +++++
 script.js  | 10 ++++++++++
 style.css  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
diff --git a/index.html b/index.html
index af88d23..fe56b78 100644
--- a/index.html
+++ b/index.html
@@ -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">
diff --git a/script.js b/script.js
index 5f4ffe2..7b2cc59 100644
--- a/script.js
+++ b/script.js
@@ -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');
diff --git a/style.css b/style.css
index f116a7e..4a95540 100644
--- a/style.css
+++ b/style.css
@@ -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;
