如何使用CSS在循环中切换文本内容？

你可以用CSS动画结合绝对定位来实现纯CSS的循环文本切换，不需要JavaScript，以下是具体实现：

HTML结构 #

用一个容器包裹所有需要切换的短语，每个短语放在<span>标签里：

<div class="text-switcher">
  <span>Hello</span>
  <span>Hello 2</span>
  <span>Hello 3</span>
</div>

CSS样式 #

通过溢出隐藏、绝对定位和关键帧动画控制文本的显示与隐藏：

.text-switcher {
  position: relative;
  height: 1.5em; /* 匹配文本的行高，避免切换时容器高度变化 */
  line-height: 1.5em;
  overflow: hidden; /* 隐藏未显示的文本 */
}

.text-switcher span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* 默认隐藏所有文本 */
  animation: switch-cycle 6s infinite ease-in-out; /* 总动画时长，可根据短语数量调整 */
}

/* 为每个短语设置动画延迟，实现依次切换 */
.text-switcher span:nth-child(1) {
  animation-delay: 0s;
}
.text-switcher span:nth-child(2) {
  animation-delay: 2s;
}
.text-switcher span:nth-child(3) {
  animation-delay: 4s;
}

/* 定义切换动画 */
@keyframes switch-cycle {
  /* 文本显示阶段：前1/3时间保持可见 */
  0%, 16.66% {
    opacity: 1;
    transform: translateY(0);
  }
  /* 文本隐藏阶段：从可见过渡到隐藏，之后保持隐藏 */
  33.33%, 100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

调整说明 #

• 如果需要添加更多短语，只需在容器内新增<span>标签，同时调整总动画时长（比如4个短语设为8秒），并给新的<span>设置对应的animation-delay（第4个设为6秒）。
• 关键帧里的百分比计算方式：100% / 短语数量 = 单个文本显示的占比，比如3个短语就是约16.66%，隐藏触发点是这个数值的2倍（33.33%）。
• 可以修改transform属性换成translateY(100%)实现向下切换，或者只保留opacity实现淡入淡出效果。

内容的提问来源于stack exchange，提问作者Mocha