纯CSS转圈动画需用::after伪元素配合border-radius:50%、transform-origin:center、will-change:transform及translateZ(0)启用GPU加速，避免安卓WebView卡顿。
怎么用 ::after 造一个纯 CSS 转圈加载动画
直接上手：用 ::after 伪元素画个圆，再靠 transform: rotate() 让它转起来，不需要 JS，也不用额外 DOM。关键不是“能不能”，而是“怎么转得顺、不卡、不闪”。
常见错误是转着转着突然跳一帧，或者在 Safari 里压根不动——多半是没加 transform-origin 或漏了 will-change。
- 必须设
content: ""，否则::after不渲染 - 圆要靠
border-radius: 50%+ 固定宽高实现，别用clip-path模拟，兼容性差 -
transform-origin得明确设成center，否则旋转中心偏移，看起来像抖动 - 加
will-change: transform能让浏览器提前升格为合成层，避免低端机掉帧
span.loader::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
transform-origin: center;
will-change: transform;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
为什么 rotate() 动画在某些安卓 WebView 里卡顿
不是代码写错了，是渲染管线没被正确触发。老版本 Android 系统（尤其是 4.4–6.0 的 WebView）对 transform 动画优化弱，单靠 rotate() 容易掉帧甚至静止。
- 只用
rotate()不够，得搭配translateZ(0)或scale(1)强制启用 GPU 加速 - 避免在
@keyframes里写多个 transform 属性（比如同时 rotate + scale），合并成一条transform: rotate(...) scale(...) - 动画时长别设太短（如
0.3s），部分低端机解析不过来，建议 ≥0.5s - 别把动画加在
position: static的元素上，至少设position: relative，减少重排干扰
border 和 box-shadow 做的转圈效果有啥实际区别
视觉上都像圈，但底层渲染成本和可控性差很多。选错方案会导致动画模糊、边缘发虚，或无法单独控制颜色/粗细。
立即学习“前端免费学习笔记（深入）”；
-
border方案：简单直接，但「缺一角」得靠border-top-color单独设色，没法做多色渐变环 -
box-shadow方案：用多重阴影堆出环形，灵活但性能差，尤其在animation中频繁重绘阴影会明显卡 - 真正需要精细控制（比如加载进度环）应该用
svg+stroke-dasharray，border只适合「有无加载」这种二值状态 - 如果必须用纯 CSS 且要抗锯齿，优先用
border+backface-visibility: hidden减少亚像素渲染问题
如何让转圈动画在暗色模式下自动适配颜色
不能靠 JS 监听 prefers-color-scheme 再改 class，那样会有闪烁。CSS 原生支持直接响应，但得写对作用域。
- 别在全局写
@media (prefers-color-scheme: dark)然后覆盖所有.loader，容易污染其他组件 - 把媒体查询包在组件选择器内，例如
.loader:not(.light) {@media (prefers-color-scheme: dark) { ... }} - 颜色尽量用
CSS 自定义属性，比如--loader-color: #666，然后在媒体查询里重设该变量，避免重复写border-color - 注意伪元素继承问题：
::after默认不继承color，所以别指望靠父级color控制边框色，老老实实设border-color
最麻烦的其实是缩放适配：1px 边框在 DPR=2 的屏上会模糊，得用 transform: scale(0.5) 配合 transform-origin 补偿，这点几乎没人提，但上线后 QA 准会截图打回来。
