CSS中实现图片滑动可以通过利用transition和transform属性来达到效果。下面是一个示例:
/* HTML部分 */ <div class="slide-container"> <img src="image-1.jpg" alt="Image 1"> <img src="image-2.jpg" alt="Image 2"> <img src="image-3.jpg" alt="Image 3"> </div> /* CSS部分 */ .slide-container { width: 600px; height: 400px; overflow: hidden; /* 隐藏超出容器的部分 */ position: relative; /* 容器需要定位才能控制图片位置 */ } .slide-container img { position: absolute; /* 图片需要定位才能控制位置 */ top: 0; left: 0; width: 100%; height: 100%; transition: transform 1s ease; /* transition设置动画属性和时间 */ } .slide-container img:first-of-type { transform: translateX(0); /* 第一张图片不需要移动 */ } .slide-container img:not(:first-of-type) { transform: translateX(-100%); /* 将其余图片往左移动一个宽度的距离 */ } .slide-container:hover img:not(:first-of-type) { transform: translateX(0); /* 鼠标悬浮在容器上时,将除第一张以外的所有图片移回初始位置 */ }
通过对容器和图片的定位,我们可以将图片堆叠在一起,并隐藏超出容器的部分。然后,通过设置transition和transform属性,我们可以控制图片的移动并实现滑动的效果。注意,第一张图片不需要移动,所以我们需要为其单独设置样式。
当鼠标悬浮在容器上时,我们可以将除第一张以外的所有图片移回初始位置,从而实现切换的效果。