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:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user