html图片滚动效果代码

以下是一段使用 HTML 和 CSS 实现图片滚动效果的示例代码：

<div class="scroll-container">
  <div class="scroll-wrapper">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
    <img src="img5.jpg">
  </div>
</div>

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

.scroll-wrapper {
  display: flex;
  flex-wrap: nowrap;
  animation: scroll 20s linear infinite;
}

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

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

这个示例代码中，我们使用了一个 `div` 元素作为容器，将所有图片放进了一个 `div` 中，并使用 `flex` 布局实现了横向排列。然后，我们使用 `keyframes` 关键字创建了一个 `scroll` 动画，通过改变 `transform` 属性的值，使得图片容器向左平移。最后，我们给图片设置了宽度为 100%，高度自适应，并使用 `object-fit` 属性实现了图片的等比例缩放和裁剪。