[分享]css中怎样让图片一张张划过

在CSS中，有多种方法可以使图片一张张划过，下面我们来介绍其中两种方法。

/* 方法一：使用animation实现图片切换 */

.box {
   width: 960px;
   height: 400px;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

@keyframes rolling {
   0% {
      left: 0;
   }
   20% {
      left: 0;
   }
   25% {
      left: -960px;
   }
   45% {
      left: -960px;
   }
   50% {
      left: -1920px;
   }
   70% {
      left: -1920px
   }
   75% {
      left: -2880px;
   }
   100% {
      left: -2880px;
   }
}

.box img {
   width: 960px;
   height: 400px;
   position: absolute;
   left: 0;
   top: 0;
   animation: rolling 10s linear infinite;
} 

上面代码中，我们创建了一个包含多张图片的容器，设置了其宽度、高度、位置和溢出等属性。然后，定义了一个名为rolling的关键帧动画，该动画包括8个关键帧，每个关键帧定义了图片容器的位置。

接下来，在图片元素上应用该动画，设置了单张图片的宽度、高度和位置等属性，最后，定义了图片水平滚动的时间函数、速度和是否无限循环等属性。

/* 方法二：使用transition实现图片切换 */

.box {
   width: 960px;
   height: 400px;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.box img {
   width: 960px;
   height: 400px;
   position: absolute;
   left: -960px;
   top: 0;
   transition: left 2s linear;
}

.box img:nth-child(2) {
   left: 0;
   z-index: 2;
}

.box img:nth-child(3) {
   left: 960px;
   z-index: 3;
}

.box img:nth-child(4) {
   left: 1920px;
   z-index: 4;
}

.box:hover img {
   left: calc(-960px * 2);
} 

上面代码中，我们设置了和方法一相同的图片容器和单张图片属性，然后，定义了每个图片元素的初始位置和z-index（避免图片重叠）。

接下来，使用:hover伪类和transition属性，设置了当鼠标悬停在图片容器上时，图片元素的位置。同时，transition属性确保位置变化具有渐变效果。

以上两种方法都可以让图片一张张划过，你可以根据自己的需求选择其中一种。