纯 css 可实现无限旋转圆环 loading：用 border 造空心环（如 border: 4px solid transparent + border-top-color），配合 @keyframes 定义 rotate(0deg) 到 rotate(360deg) 动画，animation: spin 1s linear infinite 驱动，需设宽高、transform-origin: center，避免 overflow 截断或单位/拼写错误。
如何用 @keyframes + animation 实现无限旋转的圆环 Loading
直接给结论：不用 JavaScript，纯 CSS 就能做出平滑、可调速、可配色的旋转圆环。关键在两点——用 border 造环，用 transform: rotate() 配合 infinite 动画驱动。
常见错误是直接对元素设 border-radius: 50% 还以为能转出圆环，其实那只是个实心圆；真正要的是「空心环」，得靠不等宽或透明边框+单侧有色边框来视觉模拟。
- 推荐用
border: 4px solid transparent垫底，再设border-top-color: #007bff形成单色弧段 - 动画必须定义
@keyframes，且起止帧都写transform: rotate(0deg)和rotate(360deg)，否则可能跳帧 - 别漏掉
animation-timing-function: linear，否则默认ease会让转速不均，看起来“一顿一顿” - 若需适配高 DPI 屏幕，建议用
px而非em控制环宽，避免缩放失真
为什么 animation: spin 1s linear infinite 有时不转？
最常踩的坑是元素没尺寸、没边框、或被父容器 overflow: hidden 截断。旋转本身不触发重绘，但若元素渲染面积为 0，动画就“转了个寂寞”。
- 确保元素有明确宽高，例如
width: 40px; height: 40px; - 检查是否意外设置了
display: none或visibility: hidden（后者会保留占位但不渲染动画） - 若用伪元素
::after实现圆环，记得加content: ""，否则不生成节点 - 某些旧版 Safari 需要
-webkit-transform前缀，但 iOS 13+ 和 Chrome 80+ 已基本无需
border 圆环 vs clip-path 圆环：选哪个？
两种都能做环形，但适用场景不同：border 方案轻量、兼容性好（IE10+）、易控制粗细和颜色；clip-path 更灵活（比如做缺口环、多段环），但 IE 完全不支持，且动画性能略低。
- 简单 Loading 推荐
border：代码少、调试直观、border-width直接对应环宽 - 需要动态缺口（如进度环）才考虑
clip-path: inset()或 SVGstroke-dasharray -
border方案中，box-sizing: border-box是默认行为，无需额外设置 - 若用
clip-path，注意它不触发硬件加速，大量同时动画时可能掉帧
如何让旋转圆环居中且不抖动？
抖动通常来自 transform-origin 默认值偏移或字体抗锯齿干扰。圆环本身是几何图形，应严格以中心为轴旋转。
- 显式写
transform-origin: center（等价于50% 50%），避免受margin或padding影响 - 加
will-change: transform可提示浏览器提前升层，减少重排重绘，但仅在复杂页面中必要 - 若父容器用
flex居中，确保子元素没设align-self覆盖默认居中 - 极少数情况下，
backface-visibility: hidden可缓解 Chrome 下的轻微闪烁，但现代版本已很少见
animation-duration 的单位写错（比如写成 1ms 而非 1s），或者把 infinite 拼成 infinte——浏览器静默失败，啥也不转，还不好排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
