css3制作圖片自動輪播效果

大家在瀏覽網頁的過程中，會遇見一種名叫圖片輪播的特殊效果：在同樣的位置不同的圖片會根據時間的變化循環播放，達到一種類似于播放幻燈片的效果。那么我們在網頁開發的過程中如何實現圖片的輪播特效呢？本文將向大家展示一下如何使用css3實現圖片的輪播特效。

使用css3實現輪播特效的主體思想

我們會在同樣的位置準備好多個大小相同的圖片，并且橫放在div容器內，然后在div容器之上設置一個展示容器，其中展示容器的大小和圖片大小相同，最后給圖片容器添加自定義動畫，并且在動畫不同階段設置遞增的偏移值。

注意

動畫效果分為兩部分：切換和停留。

動畫的偏移值和圖片大小相關。

使用css3實現輪播特效的原理

首先必須保證展示容器大小與圖片大小相同，再為圖片添加float效果，然后確定插入的圖片數量并且為每個圖片設置動畫階段，其中每個階段都是通過使用keyframes設置遞增的margin-left值達到切換的效果。

使用css3實現圖片輪播特效的步驟（代碼）

步驟一：使用HTML添加圖片

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

步驟二：使用css3設置動畫階段

#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}

實現圖片輪播的效果圖

以上就是如何使用css3實現圖片的自動輪播特效（附完整代碼）的詳細內容，更多請關注億速云其它相關文章！