使用 CSS @keyframes 实现全屏渐变背景加载动画，通过 background-position 动画配合 background-size: 400% 400% 实现平滑流动，animation-fill-mode: forwards 锁定终态，并在 DOMContentLoaded 后立即移除元素以确保无缝衔接真实背景。
用 CSS @keyframes 实现全屏渐变背景的加载动画
网页首次加载时，直接展示内容容易显得生硬；加一层全屏渐变背景过渡，能掩盖资源加载延迟，提升感知性能。核心不是“动起来”，而是“动得自然、不抢焦点、不阻塞渲染”。
关键点：动画必须用纯 CSS 实现（避免 JS 阻塞），背景需覆盖整个视口，且动画结束后无缝切换为真实页面背景。
-
position: fixed+z-index: -1确保层在最底层，不影响后续内容布局 - 动画时长建议
1.2s–1.8s：太短看不出效果，太长让用户误以为卡顿 - 务必用
background-size: 200% 200%配合background-position动画，才能实现平滑渐变流动感 - 动画结束时用
animation-fill-mode: forwards锁定最终状态，否则背景会闪回初始色
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.loading-bg {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: linear-gradient(-45deg, #ff6b6b, #4ecdc4, #44b5f2, #9b59b6);
background-size: 400% 400%;
animation: gradientShift 6s ease-in-out infinite;
z-index: -1;
}
如何在 DOM 加载完成时自动移除加载背景
不能靠 window.onload —— 它等所有图片、脚本、样式加载完才触发，用户早看到内容了，动画还挂着就成干扰。应该用更早的时机：DOM 解析完成、首屏关键元素就绪后立即隐藏。
- 推荐监听
DOMContentLoaded事件，配合setTimeout(..., 0)确保样式已应用再移除 - 移除方式用
element.classList.remove('loading-bg')，别用display: none或opacity: 0，否则可能触发重排或残留占位 - 如果首页有字体、图标等 WebFont 资源，可额外监听
document.fonts.load()后再移除，避免文字闪动
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const bg = document.querySelector('.loading-bg');
if (bg) bg.remove(); // 直接 remove() 最干净
}, 0);
});
兼容性与移动端适配要注意什么
iOS Safari 对 background-size > 100% 的动画支持不稳定，部分旧版本会出现跳帧或卡死；安卓 WebView 在低端机上也可能因 GPU 加速未启用而掉帧。
立即学习“前端免费学习笔记（深入）”；
- 必须加
-webkit-animation前缀，尤其对 iOS 12–14 - 避免在
:root或html上直接设动画背景——某些 Android 浏览器会把html当作滚动容器，导致背景随滚动偏移 - 用
100vw/100vh而非100%，防止在 iOS Safari 地址栏收起/展开时背景缩放错位 - 测试时打开「开发者工具 → Rendering → Paint flashing」，确认动画区域没有意外重绘整页
为什么不用 JS 控制渐变色值做动画
有人想用 requestAnimationFrame + ctx.fillStyle 或动态改 style.background 来做，这会强制浏览器每帧重计算样式、重绘图层，CPU 占用高，低端设备明显卡顿。
- CSS 动画由 GPU 加速，
background-position是少数几个能硬件加速的属性之一 - 渐变色写死在 CSS 中，不依赖 JS 运行时计算，首帧渲染更快
- JS 控制无法保证 60fps：只要一帧执行超 16ms，动画就掉帧，而 CSS 动画由浏览器底层调度，更稳
- 若真需动态换色（比如主题切换），应预定义多套 class，用
classList.toggle()切换，而非实时拼字符串设 style
animation 的 100% 关键帧对应色）和页面 body 的默认背景色设成一致，哪怕只是临时加一行 body { background: #f8f9fa; }。 
