单纯使用CSS 创建无限轮播图

35 min read

可以使用CSS的animation属性和@keyframes规则来创建无限轮播图。

首先，你可以将图片放入一个固定大小的容器中。使用overflow:hidden属性来隐藏超出容器大小的部分。

然后，使用CSS的animation属性来设置动画。你可以使用@keyframes规则来定义轮播图的动画效果。例如，你可以设置图片从左到右移动。

最后，使用animation属性将动画应用到容器上，并设置动画的持续时间和无限循环。

下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  animation: slideshow 5s infinite;
}

.slide img {
  width: 100%;
  height: 100%;
}

@keyframes slideshow {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}
</style>
</head>
<body>

<div class="container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

</body>
</html>

在这个例子中，容器的大小为300px宽，200px高，并设置了overflow:hidden，以便隐藏超出容器大小的部分。

图片放在一个具有宽度为100%和高度为100%的容器内，使其占满整个容器。

通过设置.slide div元素的animation属性为slideshow 5s infinite，将动画应用到容器上。这个动画会在5秒钟内无限循环，播放图片的轮播效果。

在@keyframes规则中定义了动画的每个阶段。使用transform: translateX()来将图片从左到右移动。0%表示动画开始时的状态，100%表示动画结束时的状态。

你可以根据需要修改容器和图片的大小，以及调整动画的持续时间和移动距离。