如何使用CSS实现两个div元素的相互淡入淡出循环切换效果？

给你两种实用的实现思路，都能完成你要的「一个消失同时另一个显示」的循环淡入淡出效果：

方案一：纯CSS实现（无需JS） #

这种方案适合简单的循环场景，代码简洁，不用依赖脚本。

首先调整HTML，给两个子div加统一类名方便控制：

<div id="container">
  <div class="fade-item">My great adventure</div>
  <div class="fade-item">Travel, adventure, leisure</div>
</div>

然后编写CSS，利用绝对定位让两个div重叠，再通过CSS动画实现交替淡入淡出：

#container {
  position: relative;
  width: 300px; /* 按需调整宽度 */
  height: 50px; /* 适配文本高度 */
}

.fade-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fadeCycle 4s infinite; /* 4秒一个周期，无限循环 */
}

/* 让第二个元素延迟2秒启动动画，实现交替效果 */
.fade-item:nth-child(2) {
  animation-delay: 2s;
}

@keyframes fadeCycle {
  0% { opacity: 0; }   /* 开始时透明 */
  25% { opacity: 1; }  /* 1秒后完全显示 */
  75% { opacity: 1; }  /* 保持显示到第3秒 */
  100% { opacity: 0; } /* 最后1秒淡出 */
}

方案二：JavaScript + CSS实现（更灵活） #

如果需要后续调整切换逻辑（比如手动触发切换、修改间隔时间），用JS控制会更方便。

HTML结构同上，先写CSS定义过渡效果：

#container {
  position: relative;
  width: 300px;
  height: 50px;
}

.fade-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.8s ease; /* 0.8秒完成淡入淡出，缓动效果更自然 */
}

.fade-item.hidden {
  opacity: 0;
}

再写JS代码控制循环切换：

const fadeItems = document.querySelectorAll('.fade-item');
let activeIndex = 0;

// 初始化：显示第一个元素，隐藏第二个
fadeItems[activeIndex].classList.remove('hidden');
fadeItems[1 - activeIndex].classList.add('hidden');

// 每3秒切换一次（可自行修改间隔时间）
setInterval(() => {
  // 隐藏当前显示的元素
  fadeItems[activeIndex].classList.add('hidden');
  // 切换到另一个元素
  activeIndex = 1 - activeIndex;
  // 显示新的元素
  fadeItems[activeIndex].classList.remove('hidden');
}, 3000);

你可以根据自己的需求调整动画时长、切换间隔，或者扩展到更多元素的循环效果。

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