css上下两层图片滚动

CSS上下两层图片滚动是一种常见的网页设计效果，通常用于展示多张图片或产品的特点。下面我们就来介绍一下如何实现这种效果。

HTML代码：
<div class="wrapper">
  <div class="top-img">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
  </div>
  <div class="bottom-img">
    <img src="img4.jpg">
    <img src="img5.jpg">
    <img src="img6.jpg">
  </div>
</div>

CSS样式：
.wrapper {
  position: relative;
  height: 500px; /*设置图片容器高度*/
  overflow: hidden; /*隐藏溢出部分*/
}
.top-img, .bottom-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto; /*使图片按比例缩放*/
  transition: transform 1s; /*设置过渡效果*/
}
.top-img {
  top: 0;
}
.bottom-img {
  top: 500px; /*根据容器高度调整下层图片显示位置*/
}
.wrapper:hover .top-img {
  transform: translateY(-500px); /*上层图片向上滚动*/
}
.wrapper:hover .bottom-img {
  transform: translateY(-1000px); /*下层图片向上滚动*/
} 

首先，HTML代码中我们用一个div容器包裹了两个div元素，分别用于展示上下两层图片。每个div中还有三个img标签，用于添加需要展示的图片。

接下来是CSS样式的部分，我们首先设置了wrapper容器的高度和overflow属性，使其成为了一个图片容器框架，同时将两个div设置为绝对定位。top-img和bottom-img的宽度都设置为100%，并将高度设置为自适应，这样就可以根据图片的实际尺寸和容器的高度按比例缩放图片。

在底部图片的样式中，我们将其top属性设置为了容器的高度，这是为了让其不在容器的可视范围之内。然后我们使用了CSS3的transition属性，设置了过渡效果。这个属性可以通过设置一个时间来让元素慢慢过渡到另一个状态，这里我们设置了1s，即过渡时间为1秒。

最后，在:hover伪类中设置了上下两个div元素的transform属性来实现滚动效果。transform属性可以让元素转换为具体的矩阵，来实现旋转、缩放和平移等效果。这里我们设置了上层图片向上平移500px，下层图片向上平移1000px，这样就可以实现两层图片的滚动效果。