用content配合steps()做Loading更可控，因content可直接操控伪元素文本实现“亮/灭”硬切换，steps(3,end)精准分3帧使“.”“..”“...”等时显示，避免渐变模糊。
为什么用 content 配合 steps() 做 Loading 更可控
因为纯 CSS 实现打点（如 ... 逐个出现）时，content 能直接操控伪元素文本内容，而 steps(3, end) 可精准切分动画帧，避免 opacity 渐变或 transform 位移带来的“模糊过渡”——你想要的是“亮/灭”硬切换，不是淡入淡出。
常见错误是用 animation: fade 1s infinite 配合三个 span 分别延迟，既冗余又难对齐节奏；或者误用 ease-in-out 导致点“拖影”。
-
content必须作用于::before或::after，且元素需设display: block或inline-block -
steps(3, end)表示把整个动画等分为 3 帧，停在每帧结尾（即第 1 帧显示"."，第 2 帧".."，第 3 帧"..."），不能写成steps(3, start)，否则首帧为空白 - 动画时长建议设为
1.2s或1.5s，太短人眼跟不上，太长显得卡顿
如何用 content + @keyframes 实现三点循环打点
核心思路：用一个伪元素承载全部三种状态的文本，靠 content 在关键帧中切换值，再用 steps(3, end) 确保每种状态停留相等时间。
@keyframes ellipsis {
0% { content: "."; }
33% { content: ".."; }
66% { content: "..."; }
100% { content: "."; }
}
.loading::after {
content: ".";
animation: ellipsis 1.5s infinite steps(3, end);
display: inline-block;
}
注意：content 在 @keyframes 中合法，但仅对 ::before/::after 生效；steps(3, end) 必须与 3 个关键帧严格对应（0%→33%→66%→100%），少一帧或多一帧都会错位。
立即学习“前端免费学习笔记（深入）”；
- 若想从
".."开始，就把0%改为content: "..";，同时调整起始偏移（加animation-delay: -0.5s） - Firefox 对
content动画支持良好，但旧版 Safari（≤15.4）需加-webkit-前缀 - 不要给该伪元素设
white-space: nowrap，否则多点可能被截断
steps() 的步数和方向怎么选才不丢帧
打点效果本质是离散状态切换，steps(n, jump) 的 n 必须等于状态总数（这里是 3），jump 必须为 end——否则第一帧会跳过初始值。
-
steps(3, start)：动画一开始跳到第 2 帧（".."），漏掉"." -
steps(4, end)：强制分成 4 帧，但只有 3 个content值，最后一帧重复"."，节奏变慢且不自然 - 如果后续要扩展为四点（
"...."），只需改steps(4, end)并补全99%关键帧，无需改 HTML 结构
兼容性与可访问性要注意什么
这个方案在 Chrome/Firefox/Safari（15.5+）中表现一致，但 IE 完全不支持 content 动画，必须降级；另外屏幕阅读器不会播报伪元素内容，所以不能把关键提示信息放进去。
- 降级方案：用
.loading::after { content: "…"; }（Unicode 水平省略号）静态显示，不加动画 - 若 Loading 有语义需求（如表单提交中），务必额外加
aria-live="polite"和真实文本节点，例如：<span class="loading" aria-live="polite">加载中</span> - 高对比度模式下，部分系统会禁用伪元素，所以背景色与点色差要足够（推荐用
#333而非浅灰）
真正容易被忽略的是：动画触发时机。不要等 JS 请求发出去才加 loading 类，应在用户点击瞬间就渲染，否则首帧延迟会让人觉得“没反应”。
