Question

我正在使用HTML和CSS在网页上创建淡入淡出的全屏幻灯片，但是效果不佳。我可以在背景图像上创建淡入淡出，但是存在问题。首次加载时，每个图像之间都有白色闪烁。我不想避免白色闪烁。我该如何解决？

我已经用HTML和CSS编写了交叉淡入淡出的幻灯片。

<body>
  <div class="slideshow">
  </div>
</body>

body {
  margin: 0;
  padding: 0;
}

.slideshow {
  height: 100vh;
  weight: 100%;
  background-image: url('../images/1.jpg');
  background-size: cover;
  animation: slide 24s infinite;
}

@keyframes slide {
  25% {
    background-image: url('../images/2.jpg');
    background-size: cover;
  }

  50% {
    background-image: url('../images/3.jpg');
    background-size: cover;
  }

  75% {
    background-image: url('../images/4.jpg');
    background-size: cover;
  }
}

我不需要白色的闪烁，并且可以应用精美的淡入淡出幻灯片。

Answer 1

闪烁可能是因为浏览器可能绘制了新图像。

尝试为每张幻灯片创建单独的

，将它们放置在绝对位置，然后将它们淡出。

<body>
    <div class="slideshow">
        <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>
</body>

.slideshow {
  position: relative;
  width: 100vw; height: 100vh;
}

.slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
  opacity: 0;
  transition: opacity 1s;

  background-size: cover;
  background-position: center;
}
.slide.active { 
  opacity: 1;
}

仅使用CSS：

@keyframes slide-1 {
    0% , 40% , 100% { opacity: 0; }
    20%             { opacity: 1; }
}
@keyframes slide-2 {
    0% , 20% , 60% , 100% { opacity: 0; }
    40%                   { opacity: 1; }
}
@keyframes slide-3 {
    0% , 40% , 80% , 100% { opacity: 0; }
    60%                   { opacity: 1; }
}
@keyframes slide-4 {
    0% , 60% , 100%  { opacity: 0; }
    80%              { opacity: 1; }
}

.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }

或使用JS：

setInterval(function(){ 
    var current = document.querySelector('.slide.active');

    if (current.nextElementSibling) {
        current.nextElementSibling.classList.add('active');
    } else {
        current.parentElement.firstElementChild.classList.add('active');
    };

    current.classList.remove('active');
}, 6000);

如何在没有白色闪烁的背景上创建全屏交叉渐变幻灯片？

1 个答案: