背景图像的淡入淡出过渡效果 - 重叠问题

Question

AIM

我想显示三张图片之间的渐变效果（最好是 10 张，这道题我用了三张）。每张图片应逐渐增加其不透明度，直到完全不透明，然后下一张图片应开始相同的过程，即从不透明度 0 到 1。

问题

如果您查看该片段，您会发现只有第三张图片遵循此不透明过程，而前两张图片模糊显示，因为第一张图片与它们重叠。

感谢您的帮助！

尝试

.slider {
  margin: 0;
  padding: 0;
  }
  
  .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-1 {
  background-image: url("https://images.immediate.co.uk/production/volatile/sites/23/2019/10/Federico_Veronesi_Lions-cover-image-e359a4e.jpg?quality=45&crop=10px,234px,3691px,2458px&resize=620,413");
  animation: fade1 10s infinite;
}
.slide-2 {
  background-image: url("https://images.unsplash.com/photo-1490100886609-e401a775fb3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  animation: fade2 10s infinite;
}
.slide-3 {
  background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  animation: fade3 10s infinite;
}

@keyframes fade1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade3 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

<body class="slider">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
</body>

Answer 1

CSS 动画是可行的，但需要一些技巧。您的代码不起作用的原因是 所有 CSS 动画同时发生 。你想要的是确保 fade1、fade2 和 fade3 都以连续的时间间隔开始和停止，这样它们就会相继出现：

fade1 从 0% 开始到 33% (1/3) 结束
fade2 从 33% (1/3) 开始到 67% (2/3) 结束
fade3 从 67% (2/3) 开始到 100% (3/3) 结束

当然，这意味着您将需要 (1) 为添加的每张幻灯片声明一个新的关键帧，以及 (2) 调整 all 的 start/end 点添加新幻灯片时的关键帧。这可能很麻烦，并且自动化（或以编程方式执行）的唯一方法是使用 JS 或预处理 CSS.

请参阅下面的概念验证：

.slider {
  margin: 0;
  padding: 0;
}
  
  .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-1 {
  background-image: url("https://images.immediate.co.uk/production/volatile/sites/23/2019/10/Federico_Veronesi_Lions-cover-image-e359a4e.jpg?quality=45&crop=10px,234px,3691px,2458px&resize=620,413");
  animation: fade1 10s infinite;
}
.slide-2 {
  background-image: url("https://images.unsplash.com/photo-1490100886609-e401a775fb3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  animation: fade2 10s infinite;
}
.slide-3 {
  background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  animation: fade3 10s infinite;
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
}

@keyframes fade2 {
  33% {
    opacity: 0;
  }

  67% {
    opacity: 1;
  }
}

@keyframes fade3 {
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<body class="slider">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
</body>

SCSS解法

如果您使用 CSS 预处理器，例如 SCSS，您可以简单地即时生成幻灯片：您只需要记住添加相应的标记即可：

// Just some demo images
$images: [
  'https://via.placeholder.com/400x300/3077FF/fff?text=Slide1',
  'https://via.placeholder.com/400x300/2C9EE8/fff?text=Slide2',
  'https://via.placeholder.com/400x300/3DE4FF/fff?text=Slide3',
  'https://via.placeholder.com/400x300/2CE8CE/fff?text=Slide4',
  'https://via.placeholder.com/400x300/30FFA8/fff?text=Slide5',
];

.slide {
  position: absolute;
  width: 400px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

@for $i from 1 through length($images) {
    $image: nth($images, $i);

    // Custom animation styles and background image for each slide
    .slide-#{$i} {
      animation: fade#{$i} 10s infinite;
      background-image: url(#{$image});
    }

    // Generate keyframe for each slide
    @keyframes fade#{$i} {
      #{(($i - 1) / length($images)) * 100%} {
        opacity: 0;
      }

      #{($i / length($images)) * 100%} {
        opacity: 1;
      }
    }
}

参见下面的示例（CSS 已预编译）：

.slider {
  margin: 0;
  padding: 0;
}

.slide {
  position: absolute;
  width: 400px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

.slide-1 {
  animation: fade1 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/3077FF/fff?text=Slide1);
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
.slide-2 {
  animation: fade2 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/2C9EE8/fff?text=Slide2);
}

@keyframes fade2 {
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.slide-3 {
  animation: fade3 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/3DE4FF/fff?text=Slide3);
}

@keyframes fade3 {
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
.slide-4 {
  animation: fade4 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/2CE8CE/fff?text=Slide4);
}

@keyframes fade4 {
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.slide-5 {
  animation: fade5 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/30FFA8/fff?text=Slide5);
}

@keyframes fade5 {
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="slider">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
    <div class="slide slide-4"></div>
    <div class="slide slide-5"></div>
</div>

Answer 2

要进行淡入淡出的过渡，您需要向关键帧添加百分比。这描述了您希望图像出现在屏幕上的时间百分比。对于这个例子，你选择了三个，所以它是 100/3，不幸的是，它是 33.33333（你明白了。）

无论如何，这是您的三张图片的更新关键帧。要调整这 10 张以上的图像，您只需要 100/10（每张图像 10%）。

所有都应从 0% 的不透明度 0 开始，然后是起始百分比的 0 不透明度（在第一个图像的情况下，它是 33%。然后是 100% 的 0 不透明度）。

    @keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    }
}

@keyframes fade2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }

  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    }
}

@keyframes fade3 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

如果您想进一步解释，请告诉我。

背景图像的淡入淡出过渡效果 - 重叠问题

Fade-transitioning effect for background images - overlapping issue

css

keyframe

css-transitions

css-animations

SCSS解法