/** * FOUC (Flash of Unstyled Content) 防护样式 * * 这些样式必须在页面加载的最早期应用，因此需要内联或通过关键CSS加载 * 为了保持代码整洁，我们将它们提取到这个独立文件中 * 注意：此文件需要在 中尽早加载 */ /* 防止滚动 - 在加载器显示时 */ body { overflow: hidden; } /* 隐藏页面内容直到加载完成 */ .smooth-scroll, .page-content { visibility: hidden; opacity: 0; } /* 加载遮罩 - 覆盖整个页面 */ #page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #7a282d); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s ease-in-out; } /* 加载图标容器 */ .loader-spinner { width: 50px; height: 50px; animation: breathe 2s ease-in-out infinite; } .loader-spinner img { width: 100%; height: 100%; object-fit: contain; } /* 呼吸动画 */ @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } } /* 加载文字 */ .loader-text { color: #ffffff; font-family: sans-serif; font-weight: bold; margin-top: 10px; opacity: 0.8; }