用::after伪元素实现顺滑CSS转圈动画需设content:""、border-radius:50%+border画圆、transform:rotate(360deg)配合@keyframes、timing-function用linear、加will-change:transform优化性能，并用currentColor适配深色模式。
怎么用 ::after 伪元素画一个纯 CSS 转圈加载动画
直接用 ::after 在元素上叠一层圆形，再配 @keyframes 旋转就行，不用 JS、不依赖 SVG。关键不是“能不能”，而是转得顺、不卡、适配深色背景。
- 伪元素必须设
content: ""，否则不渲染 - 推荐用
border-radius: 50%+border画圈，比background更易控制粗细和颜色 - 旋转轴心默认是元素中心，但若父容器没设
position: relative，::after可能脱标定位错乱 - 动画用
transform: rotate(360deg)，别用animation: spin 1s linear infinite这种裸写法——得补全@keyframes spin定义
animation-timing-function 选 linear 还是 ease-in-out
加载动画要的是“匀速感”，人眼对变速转动特别敏感。用 ease-in-out 会明显感觉到启停顿挫，像卡帧。
-
linear是唯一合理选择，确保每一度旋转耗时一致 - 别信“加点缓动更自然”——那是按钮反馈，不是加载状态
- 如果配合骨架屏使用，动画时长建议设
0.8s ~ 1.2s，太慢显滞涩，太快像抽风
深色模式下 border-color 发灰？别硬调 rgba()
用 border 画圈时，常见错误是写死 border-color: #ccc，结果在深色背景里几乎看不见。
- 优先用
currentColor，让边框自动继承文字色，语义清晰且适配主题切换 - 若需固定色值，用
hsl(200, 50%, 70%)这类可读性强的写法，比#a0b0c0更易后期调整明度 - 避免
opacity控制透明度——它会让整个伪元素变淡，包括你可能想保留的实心部分
为什么 will-change: transform 建议加上
浏览器对 transform 动画的优化前提是它知道“这个东西要动”。不加 will-change，低端机或密集列表里容易掉帧。
立即学习“前端免费学习笔记（深入）”；
- 只加在真正需要动画的伪元素上，比如
.loading::after { will-change: transform; } - 别全局加在
*::after上，会触发过多图层提升，反而拖慢渲染 - 现代 Chrome/Firefox 对此已较智能，但 Safari 仍敏感，尤其 iOS Webview
em 或 rem 比 px 更稳，不然字体缩放时转圈会错位。还有，别忘了给父元素设 display: inline-block 或 flex，否则 position: absolute 的伪元素可能找不到参照系。 
