用::after伪元素实现顺滑CSS转圈动画需设content:""、border-radius:50%+border画圆、transform:rotate(360deg)配合@keyframes、timing-function用linear、加will-change:transform优化性能，并用currentColor适配深色模式。
怎么用
伪元素
画一个纯 CSS 转圈加载动画
直接用
在元素上叠一层圆形，再配
旋转就行，不用 JS、不依赖 SVG。关键不是“能不能”，而是转得顺、不卡、适配深色背景。
伪元素必须设
，否则不渲染
推荐用
+
画圈，比
更易控制粗细和颜色
旋转轴心默认是元素中心，但若父容器没设
，
可能脱标定位错乱
动画用
，别用
这种裸写法——得补全
定义
选
还是
加载动画要的是“匀速感”，人眼对变速转动特别敏感。用
会明显感觉到启停顿挫，像卡帧。
是唯一合理选择，确保每一度旋转耗时一致
别信“加点缓动更自然”——那是按钮反馈，不是加载状态
如果配合骨架屏使用，动画时长建议设
，太慢显滞涩，太快像抽风
深色模式下
发灰？别硬调
用
画圈时，常见错误是写死
，结果在深色背景里几乎看不见。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
优先用
，让边框自动继承文字色，语义清晰且适配主题切换
若需固定色值，用
这类可读性强的写法，比
更易后期调整明度
避免
控制透明度——它会让整个伪元素变淡，包括你可能想保留的实心部分
为什么
建议加上
浏览器对
动画的优化前提是它知道“这个东西要动”。不加
，低端机或密集列表里容易掉帧。
立即学习
“
前端免费学习笔记（深入）
”；
只加在真正需要动画的伪元素上，比如
别全局加在
上，会触发过多图层提升，反而拖慢渲染
现代 Chrome/Firefox 对此已较智能，但 Safari 仍敏感，尤其 iOS Webview
实际最易漏的是伪元素的尺寸单位：用
或
比
更稳，不然字体缩放时转圈会错位。还有，别忘了给父元素设
或
，否则
的伪元素可能找不到参照系。
::after::after@keyframescontent: ""border-radius: 50%borderbackgroundposition: relative::aftertransform: rotate(360deg)animation: spin 1s linear infinite@keyframes spinanimation-timing-functionlinearease-in-outease-in-outlinear0.8s ~ 1.2sborder-colorrgba()borderborder-color: #ccccurrentColorhsl(200, 50%, 70%)#a0b0c0opacitywill-change: transformtransformwill-change.loading::after { will-change: transform; }*::afteremrempxdisplay: inline-blockflexposition: absolute