如何用HTML和CSS实现参考示例中的交叉淡入淡出动画？

云原生阿岚

2026-6-30

实现交叉淡入淡出扫过动画的解决方案

参考效果是两张图片通过横向扫过的渐变遮罩实现交叉淡入淡出切换，你当前的代码仅用单张图片+黑色渐变层，无法达成图片切换的交叉效果，以下是正确实现方式：

实现思路

容器内叠放两张图片：底层放置目标切换图，上层放置初始显示图
用带左右渐变的遮罩层从右向左滑动，遮罩层的渐变会让上层图片逐渐透明，同时透出底层图片，模拟出交叉淡入淡出的扫过过渡效果

完整代码

HTML

<div class="image-switch-container">
  <!-- 底层目标图片 -->
  <img src="target-image.jpg" alt="目标图片" class="switch-image bottom-img">
  <!-- 上层初始图片 -->
  <img src="initial-image.jpg" alt="初始图片" class="switch-image top-img">
  <!-- 渐变遮罩层 -->
  <div class="fade-overlay"></div>
</div>

CSS

.image-switch-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.switch-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上层初始图片默认显示在顶层 */
.top-img {
  z-index: 1;
}

/* 底层目标图片默认被上层覆盖 */
.bottom-img {
  z-index: 0;
}

.fade-overlay {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  /* 渐变从完全透明到完全不透明，滑动时会逐步"擦除"上层图片，透出底层图 */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  z-index: 2;
  /* 动画：从右侧滑入到左侧滑出，保持最终状态 */
  animation: slideFade 5s linear forwards;
}

@keyframes slideFade {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}