如何用HTML、CSS实现图片重叠后分离并切换文字的动画？

核心需求 #

• 初始状态：三张图片完全重叠，中央显示文字「car」
• 动画阶段：三张图片向不同方向分离，分离完成后，每张图片下方分别显示「body」「tyres」「engine」

修正后实现代码 #

HTML 代码 #

<div class="container">
  <!-- 初始显示的car文字 -->
  <p class="initial-text">car</p>
  <!-- 汽车部件容器 -->
  <div class="parts-wrapper">
    <div class="part part-left">
      <img src="https://via.placeholder.com/100" alt="车身">
      <p class="part-text">body</p>
    </div>
    <div class="part part-center">
      <img src="https://via.placeholder.com/100/ffff00" alt="轮胎">
      <p class="part-text">tyres</p>
    </div>
    <div class="part part-right">
      <img src="https://via.placeholder.com/100/ff00ff" alt="引擎">
      <p class="part-text">engine</p>
    </div>
  </div>
</div>

CSS 代码 #

/* 基础布局 */
.container {
  position: relative;
  width: 600px;
  height: 300px;
  margin: 50px auto;
  text-align: center;
}

.parts-wrapper {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
}

.part {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.8s ease-in-out;
}

.part-text {
  opacity: 0;
  margin-top: 10px;
  transition: opacity 0.3s ease-in-out 0.6s; /* 延迟显示文字 */
}

.initial-text {
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0.2s;
}

/* 动画触发后的状态 */
.container.active .initial-text {
  opacity: 0;
}

.container.active .part-left {
  transform: translateX(-150%);
}

.container.active .part-center {
  transform: translateY(120%);
}

.container.active .part-right {
  transform: translateX(150%);
}

.container.active .part-text {
  opacity: 1;
}

自动触发动画（可选JS） #

// 页面加载2秒后自动启动动画
window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.container').classList.add('active');
  }, 2000);
});

关键优化点 #

1. 用active类切换状态，避免动画结束后元素复位
2. 文字添加延迟过渡效果，让「car」消失与部件文字显示衔接更自然
3. 调整布局逻辑，确保初始状态三张图片完全重叠在中央
4. 使用ease-in-out曲线让移动和透明度变化更顺滑

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