CSS上下两层图片滚动是一种常见的网页设计效果,通常用于展示多张图片或产品的特点。下面我们就来介绍一下如何实现这种效果。HTML代码: <div class= wrapper &
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,这样就可以实现两层图片的滚动效果。
粉丝
0
关注
0
收藏
0