[分享]css3左右滑图

CSS3技术提供了很多方便开发者的功能，其中一个非常常见而有用的功能就是左右滑图。要实现这个功能并不复杂，只需要使用CSS3中的transform属性即可。.slider { overflow: hi...

CSS3技术提供了很多方便开发者的功能，其中一个非常常见而有用的功能就是左右滑图。

要实现这个功能并不复杂，只需要使用CSS3中的transform属性即可。

.slider {
  overflow: hidden;
}
.slider img {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  transition: transform 0.5s ease-in-out;
}
.slider img:hover {
  transform: translateX(50%);
} 

以上是一个简单的例子，.slider是一个具有overflow: hidden属性的容器，用来限制图片的显示范围。而.slider img则是每张图片的样式，具有float: left属性用来让图片排列在一行，以及使用translateX(50%)属性来让图片向左滑动50%的距离。

当然，以上只是一个简单的例子，实际上你可以根据需要自由设定图片的数量、滑动的速度等等，都是非常灵活自由的。

总的来说，CSS3左右滑图功能非常实用，可以用在轮播图、导航条等等方面，开发者在使用时只需要注意图像的尺寸和样式即可。