仅使用css的多个文本块的文本淡入淡出

<div class="text-container">
  <div class="text-block">文本块1</div>
  <div class="text-block">文本块2</div>
  <div class="text-block">文本块3</div>
</div>

.text-container {
  position: relative;
}

.text-block {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.text-block.active {
  opacity: 1;
}

// 获取所有文本块元素
const textBlocks = document.querySelectorAll('.text-block');

// 定义当前显示的文本块索引
let currentIndex = 0;

// 设置第一个文本块为活动状态
textBlocks[currentIndex].classList.add('active');

// 定时切换文本块
setInterval(() => {
  // 移除当前活动文本块的活动状态
  textBlocks[currentIndex].classList.remove('active');
  
  // 计算下一个文本块的索引
  currentIndex = (currentIndex + 1) % textBlocks.length;
  
  // 添加下一个文本块的活动状态
  textBlocks[currentIndex].classList.add('active');
}, 2000);