CSS技巧之:两张重叠的图片切换。有时候在网页中需要实现两张图片的切换效果,比如展示产品的多角度,或者表现比较直观的前后对比,这时候可以考虑使用两张重叠的图片实现这一效果。下面是一种CSS实现方式:&
CSS技巧之:两张重叠的图片切换。有时候在网页中需要实现两张图片的切换效果,比如展示产品的多角度,或者表现比较直观的前后对比,这时候可以考虑使用两张重叠的图片实现这一效果。下面是一种CSS实现方式:
<div class="image-box"> <img class="img1" src="image1.jpg" /> <img class="img2" src="image2.jpg" /> </div> .image-box { position: relative; display: inline-block; width: 500px; height: 500px; } .img1, .img2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .5s; } .img2 { opacity: 0; } .image-box:hover .img1 { opacity: 0; } .image-box:hover .img2 { opacity: 1; }
这里我们首先使用一个div包裹两张图片,让它们重叠显示。然后我们通过CSS的position属性,将img元素的定位设为绝对定位。然后将其中一个图片的opacity属性设置为0,这样初始时只会显示另一个图片。
接下来,我们使用:hover伪类选择器,当鼠标悬停在图片上时,切换显示的图片。这里我们使用CSS3过渡(transition)属性,让切换效果更加平滑。
如此简单的CSS,就实现了两张重叠图片的切换效果。你还可以使用JavaScript等其它方式实现类似效果。
粉丝
0
关注
0
收藏
0