必须显式设置transform-origin: center，否则元素默认绕左上角旋转导致偏移；inline元素需先设display:inline-block；@keyframes须用from/to定义0deg到360deg；动画须加linear和infinite才匀速无限转。
用 @keyframes 定义旋转动画时，别漏掉 transform-origin
纯 CSS Spinner 的核心是让一个元素持续旋转。直接写 animation: spin 1s linear infinite 往往转得“不对”——它默认绕中心点转，但视觉上你可能想要绕自身中心（比如一个圆环或小方块），这时必须显式设置 transform-origin: center。否则在 flex 或绝对定位下，元素可能偏移、抖动，尤其在 Safari 中更明显。
常见错误现象：div 转着转着“飘”出容器，或者旋转轴心歪到左上角。
- 始终为动画元素加
transform-origin: center，哪怕父容器已居中 - 如果元素是
inline（如span），先设display: inline-block或block，否则transform-origin无效 - 避免用
%值做transform-origin，固定写center或50% 50%更稳妥
用 border + transparent 实现最轻量的环形 Spinner
不需要 SVG 或伪元素，一个 div 加四边不同色的 border 就能做出经典加载环。原理是：把三边设为 transparent，一边设为实色，再配合旋转，视觉上就是单边扫圈。
性能影响很小，兼容性极好（IE10+ 都支持），且 CSS 体积不到 10 行。
- HTML 只需：
<div class="spinner"></div> - CSS 关键部分：
`.spinner { width: 40px; height: 40px; border: 4px solid transparent; border-top-color: #007bff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }` - 别用
border-style: double或dashed，它们在低版本 Android WebView 中渲染异常
用 clip-path 做不规则 Spinner 时，注意 Firefox 的兼容性断层
想做一个半圆扫动、齿轮齿状、或只转 270° 的 Spinner？clip-path 是比 SVG 更简洁的方案。但 Firefox 直到 v115 才支持 clip-path: circle() 动画，而 inset() 或 polygon() 的动画支持更晚。
使用场景：需要动态控制露出角度（比如进度式加载），又不想引入 JS。
- 安全做法：用
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)配合rotate模拟扇形扫动 - 测试时务必在 Firefox Nightly 和旧版 Chrome（v80–90）中验证，
clip-path动画容易卡顿或跳帧 - 别对
clip-path同时加transition和animation，多数浏览器会丢帧
移动端真机调试时，will-change: transform 可能反而拖慢动画
很多教程建议加 will-change: transform 提升旋转性能，但在 iOS Safari 和部分 Android 低端机上，它会强制触发额外图层合成，导致内存占用上升、首次动画延迟明显，甚至出现闪烁。
真实体验中，仅当 Spinner 持续运行 >5 秒、且页面同时有大量滚动/动画时，才值得加；否则默认不加更稳。
- 优先用
transform: rotateZ(0)触发硬件加速（比will-change更轻量） - 如果用了
will-change，记得在动画结束后用 JS 移除，或用animationend事件清理 - 在 Chrome DevTools 的 Rendering 面板勾选 “FPS Meter”，真机连 USB 调试时看帧率是否稳定在 60fps
@keyframes，但不会停掉 transform。如果你依赖 Spinner 的存在来阻塞用户操作，得额外监听 prefers-reduced-motion 媒体查询并降级为静态提示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
