Question

我正在使用html和css进行幻灯片放映，其中图像在无限循环中逐渐淡入。

然而，当我测试它时。第一个图像完全淡化为白色，然后第二个图像淡入，而不是第一个图像淡出，第二个图像同时淡入。

澄清一下，这只发生在第二个周期之后。也就是说，五个图像的第一个周期确实无缝过渡，同时淡入和淡出，但幻灯片的每个其他后续周期都在幻灯片之间出现白化。

我想让这些过渡变得无缝。显然，我的不透明度控件或关键帧计时器都犯了一个错误。

请帮忙。非常感谢。

CSS：

.css-slideshow {
  min-width:100%;
  position: fixed;
}

.css-slideshow figure {
    position: fixed;
    min-width: 100%;
    width: 100%;
    margin: 0 auto;
}

figure:nth-child(1) {
  animation: xfade 24s 24s infinite;
}

figure:nth-child(2) {
  animation: xfade 24s 18s infinite;
}

figure:nth-child(3) {
  animation: xfade 24s 12s infinite;
}

figure:nth-child(4) {
  animation: xfade 24s 6s infinite;
}

figure:nth-child(5) {
  animation: xfade 24s 0s infinite;
}

@keyframes xfade {
  0%{
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5%{
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML：

<div class="css-slideshow">

    <figure>
        <img src="slider-image1.jpg" width="100%" alt="class-header-css3"/>
    </figure>
    <figure>
        <img src="slider-image2.jpg" width="100%" alt="class-header-semantics"/>
    </figure>
    <figure>
        <img src="slider-image3.jpg" width="100%" alt="class-header-offline"/>
    </figure>
    <figure>
        <img src="slider-image4.jpg" width="100%" alt="class-header-device"/>
    </figure>
    <figure>
        <img src="dfdfdfdfdd.jpg" width="100%" alt="class-header-connectivity"/> 
    </figure>

  </div>

Answer 1

.css-slideshow {
  min-width:100%;
  position: fixed;
}

.css-slideshow figure {
    position: fixed;
    min-width: 100%;
    width: 100%;
    margin: 0 auto;
}

figure:nth-child(1) {
  animation: xfade 25s 20s infinite;
}

figure:nth-child(2) {
  animation: xfade 25s 15s infinite;
}

figure:nth-child(3) {
  animation: xfade 25s 10s infinite;
}

figure:nth-child(4) {
  animation: xfade 25s 5s infinite;
}

figure:nth-child(5) {
  animation: xfade 25s 0s infinite;
}

@keyframes xfade {
  0%{
    opacity: 1;
  }
  20%{
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="css-slideshow">

    <figure>
        <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-css3"/>
    </figure>
    <figure>
        <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-semantics"/>
    </figure>
    <figure>
        <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-offline"/>
    </figure>
    <figure>
        <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-device"/>
    </figure>
    <figure>
        <img src="https://images.unsplash.com/photo-1465284958051-1353268c077d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-connectivity"/> 
    </figure>

  </div>

这会奏效。我发现了几件事： 1）你有5张图像，但使用的是24秒动画，延迟时间为6秒。 2）24s和0s动画将从第二遍开始同时开始。 3）你的照片不够透明，足以在动画延迟之间没有间隙

我的幻灯片css有什么问题？

1 个答案: