現在,CSS3已經有很多的酷炫效果了,比如圖片輪播。
今天,我們就來學習一下怎樣使用CSS3將兩張圖片進行左右輪播。首先,我們來看一下HTML的代碼:
<div class="slider"> <img src="img1.jpg"> <img src="img2.jpg"> </div>
其中,img1.jpg和img2.jpg分別是我們要進行輪播的兩張圖片。
接著,我們再來看一下CSS的代碼:
.slider { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } img { min-width: 100%; scroll-snap-align: start; }
在CSS代碼中,我們使用了flex布局,并將其橫向滾動;同時,我們分類別設置了圖片的寬度,并讓圖片在滾動時保持靠左。
這么簡單的代碼就可以實現左右輪播了!如果你還想進行更多樣化的設置,可以根據具體需要自行修改CSS代碼或引入JS代碼。
上一篇css左右內邊距連寫