CSS 幻灯片(不同的幻灯片时间)

Question

我似乎无法制作完全可用的 CSS 幻灯片，其中幻灯片的显示时间各不相同。我需要使用多个关键帧还是有其他方法可以做到这一点？如果是，将不胜感激 :^)

Answer 1

您可以使用单个关键帧设置和 CSS3 的动画属性。

要设置每个图像显示的长度，移动百分比开始点(总长度随 animation-duration 改变)

(此外，由于我没有预加载图像，而且我为示例抓取的库存图片非常大，所以第一次通过时可能会有点紧张。)

div {
  width: 500px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  
  animation-duration: 10s;
  animation-name: slideshow;
  animation-iteration-count:infinite;
}

@keyframes slideshow {
    0% { 
      /* Image 1 */
      background-image:url("https://static.pexels.com/photos/98046/pexels-photo-98046.jpeg");
    }
    26% { 
      /* Image 1 */
      background-image:url("https://static.pexels.com/photos/98046/pexels-photo-98046.jpeg");
    }
    30% {
      /* Image 2 */
      background-image:url("https://static.pexels.com/photos/98050/pexels-photo-98050.jpeg");
    }
    56% {
      /* Image 2 */
      background-image:url("https://static.pexels.com/photos/98050/pexels-photo-98050.jpeg");
    }
    60% { 
      /* Image 3 */
      background-image:url("https://static.pexels.com/photos/97909/pexels-photo-97909.jpeg");
    }
    96% { 
      /* Image 3 */
      background-image:url("https://static.pexels.com/photos/97909/pexels-photo-97909.jpeg");
    }
    100% { 
      /* Image 1 (For a smooth transition back to the start) */
      background-image:url("https://static.pexels.com/photos/98046/pexels-photo-98046.jpeg");
    }
}

<div>
  
</div>

(为了简单起见，我在示例中省略了浏览器前缀属性，在生产中您可能希望包含前缀:-webkit-、-moz-等等)