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- 等）

CSS 幻灯片放映（不同的幻灯片时间）

CSS slideshow (varying slide times)

css

slideshow