如何使用CSS实现移动端加载中Loading动画_通过keyframes旋转效果-css教程-PHP中文网

旋转 loading 动画应使用 @keyframes spin { to { transform: rotate(360deg); } }，配合 will-change: transform 触发 gpu 加速，避免低端 android webview 卡顿；采用 border 圆环实现，兼容 ios 8+/android 4.4+，动画时长设为 0.8s 提升流畅感。

如何使用css实现移动端加载中loading动画_通过keyframes旋转效果

用 `@keyframes` 写旋转 Loading 动画，别直接套 PC 版

移动端旋转 Loading 不能照搬桌面端的 transform: rotate(360deg) 写法——很多低端 Android WebView（比如 UC、QQ 浏览器内核）对 transform 动画支持不稳，容易卡顿或跳帧。必须加 will-change: transform 或强制启用硬件加速。

推荐写法：

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #eee;
  border-top-color: #007aff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  will-change: transform; /* 关键：触发 GPU 加速 */
}

border 模拟环形，比 SVG 或伪元素更轻量、兼容性更好（iOS 8+、Android 4.4+ 都稳）
动画时长设为 0.8s 而非 1s：人眼对
避免用 from { ... } to { ... } 以外的中间帧——部分旧版 Safari 对多关键帧解析异常

在 iOS Safari 上旋转动画突然停顿？检查 `transform-origin`

iOS 12–14 的 WebKit 有个隐藏 bug：当元素没有显式设置 transform-origin，且父容器有 perspective 或 transform 时，@keyframes 旋转会中途卡住或重置角度。

解决方法很简单：

.loading-spinner {
  transform-origin: center; /* 必须显式声明 */
  /* 其他样式... */
}

不要依赖默认值，哪怕它看起来是 center
如果 Loading 是绝对定位在按钮内的，还要确认父级没意外触发 transform: translateZ(0) —— 这类“优化”反而会干扰动画层

需要适配深色模式？别用 `currentColor` 做旋转条颜色

很多人图省事用 border-color: currentColor，指望跟随文本色自动变深/浅。但问题在于：currentColor 在动画中不会实时响应系统主题切换，除非手动触发重绘（比如 toggle class）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

更稳妥的做法是用 CSS 自定义属性 + 媒体查询：

:root {
  --loading-color: #007aff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --loading-color: #5ac8fa;
  }
}
.loading-spinner {
  border-top-color: var(--loading-color);
}