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: "."; }
}

✅ 这种写法兼容性较好（Chrome/Firefox/Edge 支持 content 动画），视觉干净，节奏可控。若需兼容老版本 Safari，可退化为 opacity 动画 + 固定三点。

4. 小优化：避免布局抖动

点数变化可能引起文字宽度微调，加个最小宽度或等宽字体更稳：

• 给 .loading-text 设 min-width: 5em（按需调整）
• 或用等宽字体：font-family: "SFMono-Regular", Consolas, monospace;
• 确保 ::after 不换行：white-space: nowrap;

基本上就这些。不改结构、不加 JS、纯 CSS，靠伪元素+动画就能做出自然的跳动加载效果。

以上就是《CSS文字跳动效果实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！