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.
This commit is contained in:
2025-07-16 17:10:45 +08:00
parent c8d2026004
commit 025cd29268
3 changed files with 52 additions and 0 deletions
+10
View File
@@ -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');