[分享]css两张图片滑动

CSS两张图片滑动效果是一种常见的Web设计技巧。它使网站更加动态和吸引人，能帮助设计师表现出自己的创意和设计水平。/CSS代码：/ .slider{ : relative; overflow: hi...

CSS两张图片滑动效果是一种常见的Web设计技巧。它使网站更加动态和吸引人，能帮助设计师表现出自己的创意和设计水平。

/*CSS代码：*/

.slider{
  position: relative;
  overflow: hidden;
}

.slider img{
  position: absolute;
  transition: all 0.5s ease-in-out;
}

.slider img:last-child{
  opacity: 0;
}

.slider:hover img{
  transform: translateX(-50%);
}

.slider:hover img:last-child{
  opacity: 1;
} 

以上CSS代码封装了一个slider div，其中包含两张图片。第一张图片在slider div的最前面，第二张图片在第一张图片的后面。通过设置slider div的position属性为relative，overflow属性为hidden，确保图片超出slider div的部分不可见。 使用position属性为absolute，将图片从slider div中拿出，使其在整个Web页面中绝对定位。设置transition属性为all 0.5s ease-in-out，表示图片的动画过渡效果。 默认情况下，第二张图片的透明度为0，只有在slider div:hover状态下，通过transform属性将第一张图片向左移动50%，将第二张图片显示出来，透明度为1。达到两张图片的滑动效果。

此外，在HTML中还需要添加以下代码：

 <div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
  </div> 

用两张不同的图片进行测试，能够产生更好的效果。通过修改transition属性的值，可以增加转换的速度和流畅性，实现更灵活的动态效果。CSS两张图片滑动效果可以应用到任何网站，使页面更具吸引力和动感。