CSS中實(shí)現(xiàn)圖片滑動可以通過利用transition和transform屬性來達(dá)到效果。下面是一個(gè)示例:
/* 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設(shè)置動畫屬性和時(shí)間 */ } .slide-container img:first-of-type { transform: translateX(0); /* 第一張圖片不需要移動 */ } .slide-container img:not(:first-of-type) { transform: translateX(-100%); /* 將其余圖片往左移動一個(gè)寬度的距離 */ } .slide-container:hover img:not(:first-of-type) { transform: translateX(0); /* 鼠標(biāo)懸浮在容器上時(shí),將除第一張以外的所有圖片移回初始位置 */ }
通過對容器和圖片的定位,我們可以將圖片堆疊在一起,并隱藏超出容器的部分。然后,通過設(shè)置transition和transform屬性,我們可以控制圖片的移動并實(shí)現(xiàn)滑動的效果。注意,第一張圖片不需要移動,所以我們需要為其單獨(dú)設(shè)置樣式。
當(dāng)鼠標(biāo)懸浮在容器上時(shí),我們可以將除第一張以外的所有圖片移回初始位置,從而實(shí)現(xiàn)切換的效果。