要实现顺滑旋转的圆环加载动画，须用@keyframes定义匀速旋转、显式声明animation-timing-function: linear、统一用rotate()、单边实色+三边transparent配border-radius: 50%、宽高相等、box-sizing: border-box、transform-origin: center，并针对ie11添加-ms-前缀及适配写法。
用 @keyframes 控制圆环旋转节奏，别直接写 animation: spin 1s infinite
浏览器默认的 ease 缓动会让旋转“卡一下”，尤其在首帧和末帧，看起来像顿挫而不是流畅加载。真正顺滑得靠 linear —— 从头到尾匀速转。
- 写法必须是
@keyframes spin { to { transform: rotate(360deg); } }，不能只写from和to都空着 -
animation-timing-function: linear必须显式声明，CSS 动画默认不是线性 - 别用
rotateZ()，有些旧版 Safari 对Z轴解析不稳定，统一用rotate()
圆环缺口靠 border + transparent 实现，不是用 clip-path
想做经典“断开一圈”的 Loading 圆环，最稳的方式是用单边实色边框 + 其余三边透明，再配合 border-radius: 50%。用 clip-path 在 iOS 15.4 之前有渲染撕裂，且无法和 transform 同时硬件加速。
- 容器宽高必须相等，比如
width: 40px; height: 40px;，否则圆会压扁 -
border: 4px solid #007bff;只设一边？不行——得设四边，再把三边设为transparent，例如：border: 4px solid transparent; border-top-color: #007bff; - 别漏掉
box-sizing: border-box，否则宽高会算错，圆环偏大或居中失败
旋转中心对不齐？检查 transform-origin 和盒模型
常见现象是圆环转起来像“晃动”或“绕着左上角跑”，本质是旋转原点没落在中心。默认 transform-origin 是 50% 50%，但一旦父容器有 padding、子元素有 margin 或用了 flex 且没设 align-items: center，视觉中心就偏了。
- 给 loading 元素加
transform-origin: center（显式写死，别依赖默认） - 如果它被塞在
button里，确保 button 没设text-align: left或padding不对称 - 避免用
position: absolute+top: 50%; left: 50%居中后再旋转——此时transform-origin仍按自身左上角算，得额外加transform: translate(-50%, -50%)
IE11 兼容要手动补 -ms- 前缀，但别全加
IE11 支持 @keyframes 和 transform，但要求前缀。不过它不支持 transform-origin: center 这种写法，必须写成 transform-origin: 50% 50%；也不认 animation: spin 1s linear infinite 里的简写，得拆开写。
- 关键前缀只加两处：
@-ms-keyframes spin和-ms-animation（不是-ms-transform） -
border-radius: 50%在 IE11 里对非正方形盒子会失效，务必保证宽高等值 - 别试图用
filter: progid:DXImageTransform.Microsoft.Matrix模拟旋转——性能差，且和border圆环叠加后边缘发虚
真正麻烦的不是写法，是当 loading 出现在 modal 背景变暗层上时，IE11 下 z-index 和 transform 层叠上下文会打架，得额外给父容器加 transform: translateZ(0) 强制新建层叠上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
