全屏加载动画需三要素：用transform: rotate()配合animation: spin 1s linear infinite实现无限旋转；用position: fixed、top: 0、left: 0和z-index: 9999确保全屏覆盖与层级；用border+border-radius: 50%+显式宽高+flex居中实现稳定圆环旋转。
直接用 transform: rotate() + animation: ... infinite 就能做出全屏加载动画，但多数人卡在三处：元素没居中、动画只播一次、旋转时页面重排卡顿。
为什么 animation: spin 1s linear 不会无限转
因为缺了 infinite —— 浏览器默认 animation-iteration-count: 1，播完就停。这不是兼容性问题，是规范行为。
-
animation: spin 1s linear→ 只转一圈，静止 -
animation: spin 1s linear infinite→ 正确写法 - 别写
animation-iteration-count: 0或-1，这些值无效，退回到默认的1 - 验证技巧：临时改成
animation: spin 1s linear 2，看是否转两圈；如果一次都不转，大概率是@keyframes spin名称拼错或定义位置靠后
全屏覆盖时，position: fixed 和 z-index 必须显式设
仅靠 width: 100vw; height: 100vh 不够，滚动时动画会跟着动，或被其他元素遮住。
- 必须加
position: fixed; top: 0; left: 0; -
z-index至少设为9999，避免被 modal、header 等覆盖 - 背景建议用半透明色，如
background-color: rgba(255, 255, 255, 0.85)，别用纯白，否则暗色主题下看不见 - 别用
display: block配合margin: auto居中——它对fixed元素无效；改用display: flex; justify-content: center; align-items: center;
border 圆环旋转比图片或 SVG 更稳，但有隐藏条件
最简方案是用 border + border-radius: 50% 做旋转圆环，但它生效的前提是：元素必须有明确宽高，且 display 不能是 inline（否则 border-radius 不作用）。
立即学习“前端免费学习笔记（深入）”；
- 必须设
width和height，哪怕只是40px -
display: inline-block或block才能让border-radius生效 - 推荐写法：
border: 4px solid transparent; border-top-color: #007bff;，比box-shadow更低开销、更易控制 - 移动端要加
-webkit-animation前缀（iOS Safari 16.4 以下仍需），但现代 Chrome/Firefox 已不需要
旋转动画卡顿？多半是触发了 layout 而非 paint
用 width/height/margin 动画会强制浏览器重排（reflow），而 transform: rotate() 是合成层动画，走 GPU，不卡。
- 确保动画只作用于
transform和opacity，别混用left、top或改变尺寸 - 加
will-change: transform对旧设备有帮助，但现代浏览器通常自动优化 - 动画时长建议
0.8s～1.2s：短于0.6s显得突兀，长于1.5s用户会焦虑 - 别在
@keyframes里写transform: rotate(360deg)结束——统一用0deg起止，靠linear插值保证衔接平滑
真正容易被忽略的是：动画元素是否被父容器的 overflow: hidden 截断，或者是否因 pointer-events: none 导致点击穿透——这两处一出问题，整个加载态就失效了。
