如何仅用HTML和CSS实现文本自动轮播动画

需求：实现类似目标网站的文本展示效果，无需滚动触发，每5-15秒自动切换文本，仅使用HTML和CSS完成。

修改后的完整代码 #

HTML代码

<div class="container">
  <video autoplay loop muted plays-inline class="background-clip">
    <source src="../images/videoproject.mp4.mp4" type="video/mp4">
  </video>

  <div class="content">
    <div class="text-switcher">
      <span>Explore More</span>
      <span>Discover New Horizons</span>
      <span>Unlock Your Potential</span>
    </div>
    <a href="#">Get Started</a>
  </div>

  <h3 class="rat">Welcome to our website</h3>
</div>

CSS代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins';
}

.container {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.content {
  text-align: center;
}

/* 文本切换核心样式 */
.text-switcher {
  position: relative;
  height: 110px; /* 适配大字体高度 */
  margin-bottom: 50px;
}

.text-switcher span {
  position: absolute;
  width: 100%;
  font-size: 95px;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  animation: textSwitch 15s infinite;
}

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

.text-switcher span:nth-child(2) {
  animation-delay: 5s;
}

.text-switcher span:nth-child(3) {
  animation-delay: 10s;
}

@keyframes textSwitch {
  0%, 25% {
    opacity: 1;
    transform: translateY(0);
  }
  30%, 100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.content a {
  font-size: 23px;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  padding: 15px 25px;
  border-radius: 50px;
  transition: 0.3s;
}

.content a:hover {
  background-color: #fff;
  color: #000;
}

.background-clip {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@media (min-aspect-ratio:16/9) {
  .background-clip {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio:16/9) {
  .background-clip {
    width: auto;
    height: 100%;
  }
}

关键实现说明 #

• 文本容器定位：.text-switcher设为相对定位，内部每个文本绝对定位叠加在同一位置
• 动画逻辑：通过@keyframes textSwitch定义淡入淡出+位移的过渡效果，每个文本稳定显示5秒，之后平滑隐藏
• 切换周期：总动画时长设为15秒，三个文本分别延迟0s、5s、10s启动，实现循环切换
• 响应式兼容：保留原有视频背景的适配逻辑，文本大小可根据需求调整

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