怎么用CSS3实现网页加载等待时的圆环旋转loading？-css教程-PHP中文网

根本原因是浏览器默认使用ease缓动，导致359°到0°处明显顿挫；必须显式声明animation-timing-function: linear，并写全@keyframes规则，统一用rotate()而非rotateZ()，同时确保transform-origin为center且父容器居中无偏移。

怎么用css3实现网页加载等待时的圆环旋转loading？

为什么旋转圆环看起来“卡顿”而不是顺滑

根本原因不是代码没写完，而是浏览器默认用 ease 缓动——首帧慢、末帧也慢，转到 359° 到 0° 时明显顿一下。真正顺滑必须强制线性：显式声明 animation-timing-function: linear，不能只靠 @keyframes 里写 to { transform: rotate(360deg); } 就以为够了。

常见错误现象：animation: spin 1s infinite 没加 linear；或者写了 animation: spin 1s linear infinite，但 @keyframes 里用了 from/to 两头都空着，导致浏览器 fallback 到默认缓动。

必须写全：@keyframes spin { to { transform: rotate(360deg); } }
必须显式加：animation-timing-function: linear（哪怕已写在 animation 简写里，也建议单独声明以防覆盖）
别用 rotateZ() —— 旧版 Safari 对 Z 轴解析不稳定，统一用 rotate()

怎么画出“断开一圈”的经典圆环

最稳的方案是单边实色 + 三边透明，配合 border-radius: 50%。不是用 clip-path，也不是靠 SVG path stroke-dasharray 模拟缺口——前者在 iOS 15.4 前有渲染撕裂，后者和 transform 同时硬件加速时容易失真。

关键点在于盒模型控制：

容器宽高必须相等，比如 width: 40px; height: 40px;，否则圆会压扁
box-sizing: border-box 必须设，否则 border 会撑大整体尺寸，导致居中失败
正确写法：border: 4px solid transparent; border-top-color: #007bff;（只设一边颜色，其余三边透明）
别写成 border-top: 4px solid #007bff —— 这样左右底边没了，盒子变成“L 形”，border-radius: 50% 失效

旋转中心对不齐？先查 `transform-origin` 和父容器

圆环转起来像“晃动”或绕左上角跑，90% 是 transform-origin 没落在视觉中心。默认值 50% 50% 看似合理，但一旦父容器有 padding、子元素有 margin，或用了 flex 但没设 align-items: center，实际旋转点就偏了。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

实操建议：

显式写 transform-origin: center（现代浏览器都支持）
IE11 必须降级为 transform-origin: 50% 50%，且不能和 transform: rotate() 写在同一行简写里
确保父容器没有非对称 padding 或 text-align: left（尤其放在 button 里时）
别依赖 margin: auto 居中后再旋转——此时仍按自身左上角算原点，得额外加 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg);

IE11 兼容要手动补前缀，但别全加

IE11 支持 @keyframes 和 transform，但要求前缀；它不支持 transform-origin: center，也不认 animation: spin 1s linear infinite 的简写语法。

必须做的最小兼容改动：

加 @-ms-keyframes spin，内容和标准版一致
动画调用写成两行：-ms-animation: spin 1s linear infinite; + animation: spin 1s linear infinite;
transform-origin 改为 50% 50%，并单独声明（不能混在 transform 简写里）
别用 filter: progid:DXImageTransform.Microsoft.Matrix 模拟旋转——性能差，边缘发虚