CSS 带有淡入效果的图像滑块

Question

我一直在尝试创建一个简单的图像滑块，为网站展示四张图像。我已经设法创建了幻灯片，但是每个图像之间的转换非常快，我想要一点淡入淡出效果，这样它就更平滑了。这里的很多问题已经建议使用 jQuery，但我正在尝试仅使用 CSS。我也探索了 animate.css 但无法让它工作。感谢 any/all 提供的帮助。谢谢 :)

这里是目前的代码：

HTML

   <div class="slider">
      <div class="feature">
      </div>
      <div class="overlay">

      </div>
   </div>

和CSS

.feature {
   animation: slide 3s;

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
}



@keyframes slide {
   0%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25%{
      background-image: url(../resources/feature/Feature1.jpg);
   }

   25.1%{
      background-image: url(../resources/feature/Feature2.jpg);
   }

   50%{
      background-image: url(../resources/feature/Feature2.jpg);
   }
   50.01%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75%{
      background-image: url(../resources/feature/Feature3.jpg);
   }

   75.01%{
      background-image: url(../resources/feature/Feature4.jpg);
   }

   100%{
      background-image: url(../resources/feature/Feature4.jpg);
   }
}

Answer 1

只需更改行

animation: slide 10s infinite;

到

animation: slide 20s infinite;

这会给过渡一些时间。

Answer 2

您必须设置 "sliders" 的 opacity 和 transition 才能获得效果。

.feature {

}

.slider {
   background-repeat: no-repeat;
   background-size: cover;
   width: 100%;
   height: 80vh;
   transition: all .2s ease-in-out;
   animation: slide 10s infinite;
}

.overlay {
   color: #fff;
   width: 100%;
   height: 80vh;
   background-color: rgba(0, 0, 0, 0.5);
   transition: all .2s ease-in-out;
}



@keyframes slide {
   0%{
      opacity: 0;
      background-color: red;
   }

   20%{
   opacity: 1;
      background-color: red;
   }
   25%{
   opacity: 0;
      background-color: red;
   }
   25.1%{
   opacity: 0;
      background-color: blue;
   }

   45%{
   opacity: 1;
      background-color: blue;
   }
   50%{
   opacity: 0;
      background-color: blue;
   }
   50.01%{
   opacity: 0;
      background-color: yellow;
   }

   70%{
   opacity: 1;
      background-color: yellow;
   }
   75%{
   opacity: 0;
      background-color: yellow;
   }

   75.01%{
   opacity: 0;
      background-color: green;
   }

   95%{
   opacity: 1;
      background-color: green;
   }
   100%{
   opacity: 0;
      background-color: green;
   }
}

<div class="slider">
      <div class="feature">
      </div>
      <div class="overlay">

      </div>
   </div>

Answer 3

您可以尝试管理动画不透明度，没有任何其他方法可以创建此滑块来显示和过渡。

     @keyframes slide {
   0%{
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
   48%{ opacity:0;
   }
   50%{
      opacity:1;
      background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);

   }
   97%{ opacity:1;
   98%{ opacity:0;
    100%{
      opacity:1;
      background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);

   }
}

https://jsfiddle.net/m4tsudc7/21/

CSS 带有淡入效果的图像滑块

CSS image slider with fade in

css

animation

slider

slideshow

fadein