本文详解如何将已有的 css 动画封装为功能完整的网页预加载器：通过控制 dom 可见性与加载时机，在页面内容渲染完成前展示动画，并在指定时长（如 4 秒）后平滑切换至主内容。
本文详解如何将已有的 css 动画封装为功能完整的网页预加载器：通过控制 dom 可见性与加载时机，在页面内容渲染完成前展示动画，并在指定时长（如 4 秒）后平滑切换至主内容。
将一个精美的 CSS 动画升级为真正的网页预加载器（Pre-loader），核心不在于重写动画，而在于控制其生命周期与页面加载流程的协同。你已拥有一个基于 SVG 背景 + @keyframes 宽度变化的流畅动画（.kosa::before 的 drawSquare 动画），接下来只需三步即可完成转化：
✅ 第一步：结构隔离 —— 预加载器与主内容分离
将你的动画容器包裹进专用的 .preloader 区域，并确保主内容（如 <main></main>）与之同级、互斥显示：
<body class="loading" onload="done_loading()">
<!-- 预加载器：绝对定位、不干扰交互 -->
<div class="preloader">
<div class="kul">
<div class="kosa"></div>
</div>
</div>
<!-- 主内容区域 -->
<main>
<h1>欢迎来到我的网站</h1>
<p>所有资源加载完毕后，此处才可见。</p>
</main>
</body>⚠️ 注意：
初始添加class="loading"，并绑定onload="done_loading()"—— 这是关键触发点，确保 DOM 和外部资源（图片、脚本等）加载完成后才执行隐藏逻辑。
✅ 第二步：样式控制 —— 用 CSS 类驱动显隐状态
利用 body.loading 状态类统一控制显示逻辑，配合 opacity + transition 实现淡入淡出效果，避免生硬跳变：
/* 初始状态：预加载器显示，主内容隐藏 */
body.loading main {
opacity: 0;
}
body.loading .preloader {
opacity: 1;
}
/* 主内容默认状态：准备就绪时渐显 */
main {
opacity: 1;
transition: opacity 250ms ease;
}
/* 预加载器默认隐藏，加载中才显示 */
.preloader {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #fff; /* 可选：遮罩底色 */
opacity: 0;
transition: opacity 250ms ease;
pointer-events: none; /* 确保不拦截下方点击 */
z-index: 9999;
}✅ 优势：无需 JS 操作 display 或 visibility，纯 CSS 控制更高效；pointer-events: none 保证用户可正常与页面交互（如滚动），即使预加载器仍在视觉层。
✅ 第三步：逻辑收尾 —— 延迟隐藏与防抖处理
done_loading() 函数需兼顾「等待动画完成」与「防止重复触发」。原示例中的 setTimeout(500) 是演示占位，实际应匹配你的动画时长（4s）：
function done_loading() {
// 确保动画完整播放（4s）后再移除 loading 状态
setTimeout(() => {
document.body.classList.remove('loading');
}, 4000); // ⚠️ 与 @keyframes drawSquare 的 4s 严格一致
}? 进阶建议：若需更精准控制（例如等待关键资源加载而非固定时长），可结合
window.addEventListener('load', ...)或document.readyState === 'complete'，但对多数场景，4s 定时已足够可靠且体验可控。
✅ 最终效果验证要点
- ✅ 页面打开瞬间：仅显示
.preloader中的动画，背景纯白（或自定义色），无内容闪烁； - ✅ 动画持续 4 秒：
.kosa::before从左向右完整绘制； - ✅ 第 4 秒末：
.preloader淡出，<main></main>淡入，过渡自然； - ✅ 加载期间：用户可滚动/交互（因
pointer-events: none），无卡顿感。
至此，你的 SVG 动画已不再是“摆设”，而是一个专业、可复用、符合现代 Web 性能体验的预加载器。无需框架，纯原生 HTML/CSS/JS 即可落地。
