CSS3中實現淡入淡出效果的輪播非常簡單。以下是一個基本的示例:
.slide { position: relative; width: 100%; height: 400px; overflow: hidden; } .slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide img.active { opacity: 1; }
在上面的代碼中,首先定義了一個具有相對定位和固定高度的輪播容器,然后添加了一個具有絕對定位和覆蓋整個容器的圖像元素,這些元素都具有0的不透明度。在圖像元素上,我們定義了過渡屬性以在1秒內淡入和淡出。最后,當我們添加“active”類時,我們定義了圖像元素的不透明度為1,以實現淡入效果。
以下是實現基本輪播的HTML代碼:
在上面的代碼中,我們通過向第一個圖像添加“active”類來定義默認顯示的圖像。使用CSS3的過渡效果,我們已經成功地創建了一個簡單的淡入淡出輪播。
此外,我們還可以為我們的輪播添加更多的CSS樣式和JavaScript代碼來增強我們的效果,如自動播放,箭頭導航和圓形導航等。但是,在這篇文章中,我們只討論了如何使用CSS3創建基本的淡入淡出輪播。