使用css制作水平横向无缝滚动的轮播图

HTML代码：

<div class="slider-container">
  <ul class="slider">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
    <li><img src="image5.jpg"></li>
  </ul>
</div>

CSS代码：

.slider-container {
  width: 100%;
  overflow: hidden;
}

.slider {
  white-space: nowrap;
  transition: transform 1s ease-in-out;
}

.slider li {
  display: inline-block;
  width: 100%;
}

.slider img {
  width: 100%;
}

.slider-animating {
  animation: slide 5s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

解释：

首先，我们创建一个包含轮播图的容器，并设置其为100%宽度且隐藏溢出内容。然后，在容器中创建一个`<ul>`元素来包含轮播项，并设置其`white-space`属性为`nowrap`，这样就可以使其横向排列。接着，我们将每个轮播项设置为`inline-block`元素，并设置其宽度为100%。最后，为了实现无缝滚动，我们使用CSS动画来使`<ul>`元素水平滚动。

注意，我们还为正在动画中的轮播项添加了一个`.slider-animating`类，这样就可以实现无限循环滚动。