推荐使用字符循环+steps()方案：.loading-text::after设content为"."并用@keyframes在".", "..", "...", ""间切换，配合steps(4,end)实现精准跳动，兼容Chrome/Firefox/Edge，视觉干净节奏可控。
直接用 ::after 伪元素配合动画，就能让“加载中”文字末尾的点（·）跳动起来，完全不用改 HTML 结构。
1. 基础样式：用 ::after 插入三个点
给文字容器（比如一个 不靠位移或缩放，而是用 ⚠️ 注意： 立即学习“前端免费学习笔记（深入）”； 用一个伪元素，通过 ✅ 这种写法兼容性较好（Chrome/Firefox/Edge 支持 点数变化可能引起文字宽度微调，加个最小宽度或等宽字体更稳： 基本上就这些。不改结构、不加 JS、纯 CSS，靠伪元素+动画就能做出自然的跳动加载效果。 或 "..."，并控制显示方式：
.loading-text {
position: relative;
display: inline-block;
}
.loading-text::after {
content: "...";
margin-left: 4px;
animation: loading-dots 1.4s infinite;
}
2. 关键动画：逐个隐藏点，制造跳动节奏
visibility + opacity 控制每个点的显隐，配合 steps(3) 实现精准分帧：@keyframes loading-dots {
0% { content: "."; }
33% { content: ".."; }
66% { content: "..."; }
100% { content: ""; }
}
content 在 @keyframes 中无法动画（多数浏览器不支持）。更稳妥的做法是固定三点，只控制透明度和 visibility：
::after 的内容写死为 "..."
animation 改变 opacity 和 visibility，配合 animation-delay 错开三个点的节奏3. 推荐方案：字符循环 + steps() 精准卡帧
content 切换不同数量的点，配合 steps(4, end) 避免过渡模糊：.loading-text::after {
content: ".";
animation: dot-cycle 1.2s infinite steps(4, end);
}
@keyframes dot-cycle {
0% { content: "."; }
25% { content: ".."; }
50% { content: "..."; }
75% { content: ""; }
100% { content: "."; }
}
content 动画），视觉干净，节奏可控。若需兼容老版本 Safari，可退化为 opacity 动画 + 固定三点。4. 小优化：避免布局抖动
.loading-text 设 min-width: 5em（按需调整）font-family: "SFMono-Regular", Consolas, monospace;
::after 不换行：white-space: nowrap;
