用 radial-gradient 实现中心扩散遮罩的核心是 background-size 动画而非元素缩放，通过 background-size 从 0% 到 300vw/300vh 控制实心圆渐进展开，配合 cubic-bezier 缓动、fixed 定位容器及动画后清理 DOM 与滚动条。
用 radial-gradient 实现中心扩散的遮罩层
核心思路不是靠动画移动元素，而是用渐变遮罩配合 background-size 动画——这样性能好、无重排、兼容性也稳。关键在于把一个纯色圆形从 0% 扩展到 200% 覆盖整个视口。
常见错误是直接 animating width/height 或用 transform: scale() 套在 div 上，结果边缘模糊、缩放失真，或在 Safari 里闪烁。
-
background-image: radial-gradient(circle at center, #000 0%, #000 100%)—— 先定义一个实心黑圆，起点中心，无透明过渡 -
background-size: 0% 0%初始状态：圆半径为 0（不可见） -
background-size: 200% 200%结束状态：圆撑满整个容器（注意不是 100%，否则可能露白边） - 必须设
background-repeat: no-repeat和background-position: center
用 @keyframes 控制遮罩展开节奏
动画本身要快（通常 0.6–0.8s），但不能线性——人眼对起始顿挫敏感，建议用 cubic-bezier(0.25, 0.46, 0.45, 0.94) 模拟缓入缓出效果，比 ease-in-out 更干净。
别用 animation-fill-mode: forwards 简单收尾：它会让遮罩层“卡住”，后续页面内容可能被遮挡。正确做法是在动画结束时用 JS 移除该元素，或用 opacity: 0 + pointer-events: none 彻底退出流。
立即学习“前端免费学习笔记（深入）”；
- 关键帧写法示例：
@keyframes radial-expand { 0% { background-size: 0% 0%; opacity: 1; } 100% { background-size: 200% 200%; opacity: 0; } } - 触发后立即加
pointer-events: none，避免鼠标穿透误点底层按钮 - 如果开屏图是图片而非纯色，把
radial-gradient改成两层背景：radial-gradient(...) , url(...)，并确保第二层不参与动画
适配移动端和不同宽高比的视口
硬写 200% 200% 在窄屏（比如 iPhone 竖屏）下可能不够——因为 % 是相对容器宽/高的，而圆要覆盖对角线长度。更稳妥的是用 background-size: calc(2*sqrt((100vw * 100vw) + (100vh * 100vh)))，但 CSS 不支持 sqrt，所以退而求其次：
- 用
background-size: 300vw 300vh—— 数值够大，确保任何设备都撑满，且现代浏览器渲染无压力 - 容器必须设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;，避免被其他overflow: hidden截断 - 在 iOS Safari 上，如果页面有
viewport缩放或user-scalable=no，动画第一帧可能偏移，需加will-change: background-size提前提示合成
如何与真实业务逻辑衔接（不卡主线程）
开屏动画常伴随资源加载判断（比如等 logo 图片 onload 后再启动动画），但别在 DOMContentLoaded 就急着 start。真正要等的是首屏关键资源就绪，否则动画播完内容还没出来，用户看到白屏。
- 推荐用
document.fonts.load()+img.decode()组合判断字体和主图是否可用 - 动画开始后，立刻用
setTimeout(() => { element.remove(); }, 800)清理 DOM，别依赖animationend——它在页面切后台时可能不触发 - 如果产品要求“跳过”按钮，不要用
display: none隐藏遮罩层，而应直接调element.animate()中断当前动画并跳转到 100% 关键帧，否则会有视觉撕裂
最易被忽略的一点：动画结束后，body 的 scrollbar 可能还被锁着（尤其用了 overflow: hidden），记得在移除开屏层后同步恢复 document.body.style.overflow = ''。
