Question

我似乎无法制作完全有效的CSS幻灯片，其中显示幻灯片的时间各不相同。我是否需要使用多个关键帧，还是有其他方法可以使用它？如果是，将非常感谢解释：^）

Answer 1

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

要设置每个图像的显示长度，请移动百分比起点（总长度随animation-duration更改）

（另外，由于我没有预先加载图像和我抓到的图片库存图片非常大，第一次通过可能会有点跳跃。）

＆＃13;

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");
    }
}

＆＃13;

<div>
  
</div>

＆＃13;

（我在示例中省略了浏览器前缀属性以保持简单，在制作中，您可能希望包含前缀：-webkit-，-moz-等等

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

1 个答案: