可行，但需满足三个硬性条件：显式声明content、父元素设position: relative、动画属性仅作用于可动画值（如transform、opacity），缺一不可。
直接用 ::before 实现按钮 loading 动画是可行的，但必须满足三个硬性条件：显式声明 content、父元素设 position: relative、动画属性只能作用于可动画值（如 transform、opacity）。漏掉任意一个，动画就“不动”。
为什么写了 animation 却没反应？
最常见原因不是代码写错，而是伪元素根本没渲染出来。CSS 伪元素不声明 content 就等于不存在——哪怕你写了 animation: spin 1s infinite，浏览器也无处可播。
-
content必须显式设置，哪怕只是content: ""或content: " " - 按钮元素必须有
position: relative，否则::before默认脱离文档流，定位失效，视觉上“消失” - 若用
transform: rotate()做旋转动画，但没加display: inline-block或block，部分浏览器会忽略动画（inline 元素对 transform 支持不稳定）
怎样让 ::before 转起来？
核心是用 border + transparent 拼出环形，再靠 transform: rotate() 驱动。不能只写静态 rotate，必须配合 @keyframes 和 animation 触发连续变化。
- 给
button::before设border: 2px solid #007bff，再单独覆盖border-top-color: transparent，形成缺口圆环 - 尺寸靠
width/height控制，建议用1em或固定像素（如16px），避免响应式错位 - 关键帧必须写全：
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }，只写to不够稳定 - 动画声明里要带
infinite linear，否则转半圈就停
怎么控制 loading 状态显隐？
别用 JS 增删伪元素，用类名切换最稳妥。比如加个 btn--loading 类，在它生效时才激活伪元素动画和遮罩。
- 初始状态：按钮正常文字可见，
::before存在但opacity: 0或visibility: hidden - 触发 loading：JS 给按钮加
btn--loading类，该类中把::before的opacity设为1，同时启动animation - 注意遮挡：loading 状态下建议用
pointer-events: none锁住按钮，防止重复点击；文字可用color: transparent或text-indent: -9999px隐藏，但别用display: none（会破坏伪元素定位上下文）
低端设备卡顿怎么办？
旧版 Safari 或低端安卓 WebView 上 spinner 掉帧，本质是没进 GPU 合成层。强制提升需要两个动作，缺一不可。
- 在
btn--loading::before中加will-change: transform（仅在此类下启用，别全局写） -
transform动画里必须包含translateZ(0)或scale(1)，例如：transform: rotate(0deg) translateZ(0)，否则 Chrome 某些版本仍走 CPU 渲染 - 避免在动画过程中改
width/height或top/left，这些会触发布局重排，直接废掉硬件加速
真正容易被忽略的是 content 声明和 position 定位这两步——它们不报错，也不警告，但动画就是静止不动。调试时先检查 computed styles 里 ::before 是否出现在 DOM 树中，再看它的 content 值和 display 类型，比对着 keyframes 一行行查更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
