要实现顺滑旋转的圆环加载动画，须用@keyframes定义匀速旋转、显式声明animation-timing-function: linear、统一用rotate()、单边实色+三边transparent配border-radius: 50%、宽高相等、box-sizing: border-box、transform-origin: center，并针对IE11添加-ms-前缀及适配写法。
用
控制圆环旋转节奏，别直接写
浏览器默认的
缓动会让旋转“卡一下”，尤其在首帧和末帧，看起来像顿挫而不是流畅加载。真正顺滑得靠
—— 从头到尾匀速转。
写法必须是
，不能只写
和
都空着
必须显式声明，CSS 动画默认不是线性
别用
，有些旧版 Safari 对
轴解析不稳定，统一用
圆环缺口靠
+
实现，不是用
想做经典“断开一圈”的 Loading 圆环，最稳的方式是用单边实色边框 + 其余三边透明，再配合
。用
在 iOS 15.4 之前有渲染撕裂，且无法和
同时硬件加速。
容器宽高必须相等，比如
，否则圆会压扁
只设一边？不行——得设四边，再把三边设为
，例如：
别漏掉
，否则宽高会算错，圆环偏大或居中失败
旋转中心对不齐？检查
和盒模型
常见现象是圆环转起来像“晃动”或“绕着左上角跑”，本质是旋转原点没落在中心。默认
是
，但一旦父容器有
、子元素有
或用了
且没设
，视觉中心就偏了。
给 loading 元素加
（显式写死，别依赖默认）
如果它被塞在
里，确保 button 没设
或
不对称
避免用
+
居中后再旋转——此时
仍按自身左上角算，得额外加
IE11 兼容要手动补
前缀，但别全加
IE11 支持
和
，但要求前缀。不过它不支持
这种写法，必须写成
；也不认
里的简写，得拆开写。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
关键前缀只加两处：
和
（不是
）
在 IE11 里对非正方形盒子会失效，务必保证宽高等值
别试图用
模拟旋转——性能差，且和
圆环叠加后边缘发虚
真正麻烦的不是写法，是当 loading 出现在 modal 背景变暗层上时，IE11 下 z-index 和
层叠上下文会打架，得额外给父容器加
强制新建层叠上下文。
@keyframesanimation: spin 1s infiniteeaselinear@keyframes spin { to { transform: rotate(360deg); } }fromtoanimation-timing-function: linearrotateZ()Zrotate()bordertransparentclip-pathborder-radius: 50%clip-pathtransformwidth: 40px; height: 40px;border: 4px solid #007bff;transparentborder: 4px solid transparent; border-top-color: #007bff;box-sizing: border-boxtransform-origintransform-origin50% 50%paddingmarginflexalign-items: centertransform-origin: centerbuttontext-align: leftpaddingposition: absolutetop: 50%; left: 50%transform-origintransform: translate(-50%, -50%)-ms-@keyframestransformtransform-origin: centertransform-origin: 50% 50%animation: spin 1s linear infinite@-ms-keyframes spin-ms-animation-ms-transformborder-radius: 50%filter: progid:DXImageTransform.Microsoft.Matrixbordertransformtransform: translateZ(0)