长按触发环形加载动画需JavaScript判断按压时长（≥300ms）添加is-loading类，CSS用伪元素+clip-path+rotate(720deg)实现顺时针匀速旋转，animation-fill-mode:forwards保持终态，touchstart/touchend兼容移动端，animationend清理类。
按钮长按时触发环形加载动画，不能只靠
因为
是瞬时状态——手指按下就触发、抬起就消失，撑不起一个持续 1.5 秒的环形加载动画。真要“长按才动”，得用 JavaScript 监听
+
控制动画启停，CSS 只负责定义动画本身。
常见错误现象：
里加
动画，结果一松手就中断，或者根本没机会播完；更糟的是在移动端，
响应延迟甚至不触发。
必须用 JS 判断按压时长（比如 ≥ 300ms）再添加加载类，如
CSS 动画需设为
，保证最后一帧停留
移动端还要监听
/
，不能只靠鼠标事件
用
伪元素
画环形，比改
更可控
直接 animating
的 width/color 会牵扯布局、且无法实现“从 0° 开始顺时针描边”的效果；而用伪元素 +
+
或
组合，才是可靠路径。
性能影响：用
和
触发 GPU 加速，避免 animating
或
引起重排。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
推荐方案：伪元素设为圆形，用
切一半，再配合
模拟“画弧”
兼容性注意：
在 Safari 旧版本需
别用
或 SVG
内联，增加 DOM 复杂度，维护成本高
环形动画的关键帧必须绕开
的插值陷阱
CSS 对
默认做最短路径插值，结果可能不动或倒转——尤其当动画循环多次时，视觉上会“跳帧”或“卡顿”。真实环形加载要求稳定顺时针匀速转。
解决办法只有一个：把终点设成
或更高，强制走满整圈。
错误写法：
→ 浏览器可能优化成 0deg
正确写法：
，或分三段：0deg → 360deg → 720deg
别依赖
，它不适合旋转动画
长按中途取消时，动画必须可逆或立即收尾
用户按住 200ms 后松手，此时动画还没启动；但如果已启动（比如 400ms 后），松手时不能让环停在半路——得要么立即消失，要么补完最后一圈再收。
最容易被忽略的点：JS 里清除定时器只是防止动画开始，但若动画已在运行，class 还在，就得手动移除 class 并重置伪元素状态。
给按钮加
，移除
时带淡出
动画结束回调用
事件清理 class，避免残留
别在
里直接
就完事——得先判断动画是否已触发
事情说清了就结束
:active:activemousedownsetTimeout:active@keyframes:activeis-loadinganimation-fill-mode: forwardstouchstarttouchend::afterborderborderborder-radius: 50%clip-pathtransform: rotate()transformopacitywidthheightclip-path: inset(0 0 0 50%)rotate()clip-path-webkit-clip-pathborder-image.btn.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid #ccc;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}transform: rotate(360deg)rotate(0deg) → rotate(360deg)rotate(720deg)to { transform: rotate(360deg); }to { transform: rotate(720deg); }animation-timing-function: steps()transition: opacity .15sis-loadinganimationendtouchendel.classList.remove("is-loading")