HTML中如何实现纯CSS的加载旋转动画-html教程-PHP中文网

最简可靠旋转加载动画需用@keyframes定义唯一名称的动画，含from/to或0%/100%，绑定到有宽高且可见的元素，用transform: rotate()而非left/top，设transform-origin: center、animation: name 1s linear infinite，并用border-radius: 50%和单边有色边框实现圆环。

html中如何实现纯css的加载旋转动画

用 `@keyframes` 定义旋转动画最可靠

浏览器兼容性好、无需 JS、不依赖第三方库，@keyframes 是纯 CSS 实现旋转加载动画的基石。关键不是“转起来”，而是让旋转看起来平滑、不卡顿、不拉伸。

必须加 transform-origin: center，否则元素可能绕左上角转，尤其对 inline 元素或未设宽高的容器
动画时长建议设为 0.8s～1.2s，太短像抽搐，太长让用户误以为卡死
务必写 animation-timing-function: linear，用 ease 会导致启停顿挫，破坏“持续运转”感

示例：

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

用 `border` 画圆环加载器最轻量

不需要 SVG 或额外 DOM 节点，仅靠一个空 <div> + 边框技巧就能做出经典环形旋转效果，适合按钮 loading、API 请求等待等场景。 <ul> <li>核心是设置三边 <code>border 透明，一边有色：border: 4px solid transparent + border-top-color: #007bff

必须设 border-radius: 50%，否则是方角矩形转圈

高度宽度要相等，且最好显式声明（如 width: 24px; height: 24px），避免 inline 元素尺寸塌陷

注意 Safari 旧版本对 transparent 边框渲染有偏差，可改用 rgba(0,0,0,0) 兜底

避免 `animation-play-state` 控制时的跳帧问题

很多方案用 animation-play-state: paused/running 动态启停加载动画，但直接切状态会导致旋转角度突变，视觉上“咔”一下回弹。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

根本原因是 CSS 动画没有记忆当前旋转角度，暂停后恢复会从 keyframe 起点重算
稳妥做法是用类名切换控制显示/隐藏，而非启停动画本身：.loader 始终运行，.loader.hidden { visibility: hidden }
如果真需暂停，可用 JS 记录 getComputedStyle(el).transform 的矩阵值，再用 transform: matrix(...) 手动设初始态 —— 但通常没必要，掩盖比暂停更自然

IE11 下 `rotate()` 需要 `-ms-` 前缀但不推荐补

IE11 支持 -ms-transform: rotate(360deg)，但它的 @keyframes 实现有严重 bug：动画会忽快忽慢，且无法与 transform-origin 正确配合。

实际项目中，若仍需支持 IE11，建议降级为静态 GIF 加载图，比硬塞 CSS 动画更稳定
所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）都原生支持无前缀 transform 和 @keyframes
别信自动前缀工具（如 Autoprefixer）对 IE11 @keyframes 的“修复”，它只能加前缀，不能修逻辑缺陷

真正难的不是让圈转起来，是让转得不刺眼、停得不突兀、缩放时不变形、换主题时不漏色 —— 这些细节全藏在 transform-origin、box-sizing、颜色继承和父容器 overflow 里。