CSS3实现横向展示图片滑动展示效果(转载)

好的，下面是实现横向展示图片滑动展示效果的CSS3代码：

HTML结构：

<div class="slider">
  <div class="slider-inner">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <img src="image5.jpg" alt="">
  </div>
</div>

CSS3样式：

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

.slider-inner {
  display: flex;
  transition: transform 0.5s ease;
}

.slider-inner img {
  width: 100%;
  height: auto;
}

.slider:hover .slider-inner {
  transform: translateX(-20%);
}

解释一下上面的代码：

1. 首先，我们创建一个父容器 `.slider`，设置宽度为100%并设置 `overflow: hidden`，以便隐藏超出容器宽度的内容。

2. 然后，我们在父容器内创建一个子容器 `.slider-inner`，用来包含我们要展示的图片。我们设置 `.slider-inner` 的 `display` 属性为 `flex`，以便让图片水平排列。

3. 我们设置 `.slider-inner` 的 `transition` 属性为 `transform 0.5s ease`，以便在鼠标悬停时实现平滑过渡效果。

4. 接下来，我们设置图片的宽度为100%，高度自适应。

5. 最后，我们使用 `:hover` 伪类来控制 `.slider-inner` 的 `transform` 属性，以实现鼠标悬停时的滑动效果。

在这里，我们使用了 CSS3 的 `transform` 属性来实现滑动效果，同时也使用了 `transition` 属性来实现平滑过渡效果。如果你想要更加定制化的滑动效果，可以尝试使用其他的 CSS3 属性和技巧。