用 CSS 实现图片滚动：轻量级且优雅

2023-11-03 09:37:10

突破传统，CSS 滚动图片新风尚

在现代网页设计中，图片滚动是一种常见且有效的展示方式。传统的图片滚动通常使用 JavaScript 库或框架，例如 Swiper.js 或 Slick.js。这些库提供了许多功能，例如响应式设计、触摸手势支持和自动播放。然而，对于某些项目，这些库可能过于复杂或重量级。

轻量级且优雅的解决方案

纯 CSS 滚动图片是一种轻量级且优雅的替代方案。它仅使用 CSS 属性，无需任何 JavaScript。这意味着它可以在任何支持 CSS 的浏览器中工作，并且无需担心加载额外的脚本。

所需的 CSS 属性

为了实现 CSS 滚动图片，我们需要使用以下 CSS 属性：

overflow: hidden：此属性可防止滚动元素的内容溢出其容器。
scroll-snap-type: x mandatory：此属性允许我们定义滚动元素的滚动行为。x 意味着水平滚动，mandatory 意味着滚动元素必须在每个滚动步骤中停止。
scroll-snap-points-x: repeat(X, Xpx)：此属性定义滚动元素的滚动停止点。X 是滚动元素的宽度，重复次数是滚动元素中滚动停止点的数量。
animation: scroll Xms linear infinite：此属性为滚动元素添加动画。X 是动画的持续时间（以毫秒为单位），linear 表示动画以恒定速度运行，infinite 表示动画将无限重复。

逐步指南

创建一个容器元素并设置 overflow: hidden。
在容器元素中，创建滚动元素并设置 scroll-snap-type: x mandatory 和 scroll-snap-points-x: repeat(X, Xpx)。
将图片放入滚动元素中。
为滚动元素添加 animation: scroll Xms linear infinite。

示例代码

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

.container {
  overflow: hidden;
}

.scroller {
  scroll-snap-type: x mandatory;
  scroll-snap-points-x: repeat(3, 100%);
  animation: scroll 500ms linear infinite;
}

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