CSS伪元素实现加载动画_利用before与after构建旋转图形

伪元素加载动画不转的主因是未设content、display或定位不当；正确写法需content:””、display:block/inline-block、position:absolute配合transform居中旋转。

伪元素加载动画为什么转不起来

常见现象是写了 ::before 或 ::after，加了 animation，但图形完全不动——大概率是没给伪元素设 content，或者忘了设尺寸/显示方式。

• content 必须显式声明（哪怕只是 content: ""），否则伪元素不渲染，动画自然无效
• 伪元素默认是 display: inline，不支持宽高、border-radius 等；得加 display: block 或 inline-block
• 如果父容器没设 position: relative，又想用 absolute 定位伪元素，容易飘出可视区，看起来像“消失”了

旋转圆圈最简可行写法（css only）

不用 js、不依赖第三方库，一个带旋转的圆圈加载器，核心就三步：占位、绘形、动起来。

button {   position: relative; } button::after {   content: "";   position: absolute;   top: 50%;   left: 50%;   width: 16px;   height: 16px;   border: 2px solid #ccc;   border-top-color: #007bff;   border-radius: 50%;   transform: translate(-50%, -50%);   animation: spin 1s linear infinite; } @keyframes spin {   to { transform: translate(-50%, -50%) rotate(360deg); } }

注意：transform 里必须同时保留 translate 和 rotate，只写 rotate 会绕左上角转，不是绕中心。

before 和 after 同时用时的坑

想做一个双色旋转环（比如 loading 的“双圆弧”效果），常会想到一个用 ::before，一个用 ::after。但实际容易卡在两处：

立即学习“前端免费学习笔记（深入）”；

• 两个伪元素默认层叠顺序是 ::after 在 ::before 上面，如果没调 z-index，后画的可能盖住前画的，导致视觉错乱
• 若父元素没设 position，absolute 定位的伪元素会相对于最近有定位的祖先定位——而不是你想象的按钮本身，结果动画跑偏
• 别在伪元素里用 background-image 模拟旋转，它不随 transform 旋转；要旋转图案，得用 border + clip-path 或 SVG 内联

移动端旋转动画卡顿或掉帧

尤其 ios safari 下，纯 transform + opacity 通常流畅，但一旦涉及 border 绘图 + rotate，容易触发重排或软件渲染。

• 优先用 transform: rotate() 而非 animation: spin 配合角度数值变化，前者更易被 GPU 加速
• 避免在伪元素里设 box-shadow 或渐变边框，这些在低端机上开销大
• 真要保兼容又求性能，不如直接用内联 <svg></svg> + stroke-dasharray 动画，比 CSS 伪元素更可控

伪元素做加载动画的边界很清晰：轻量、静态图形、不需要精确 timing 控制时够用；一旦要响应状态、暂停/重置、或适配深色模式变量，就得切到 JS 或 SVG 方案——这点很容易被忽略，直到 QA 提出“点击按钮后动画停不住”。