如何通过CSS伪元素before和after实现加载动画中的旋转图形效果？

本文共计807个文字，预计阅读时间需要4分钟。

常见现象是写了 `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> + stroke-dasharray 动画，比 CSS 伪元素更可控

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