首頁 > web前端 > css教學 > 主體

如何使用css3實現圖片的自動輪播特效(附完整程式碼)

坏嘻嘻
發布: 2019-11-30 16:42:11
原創
28996 人瀏覽過

本文在介紹如何使用css3實現圖片的輪播特效的基礎上,重點探討了其具體步驟,本文內容緊湊,希望大家可以有所收穫。

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

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

#我們會在同樣的位置準備好多個大小相同的圖片,並且橫放在div容器內,然後在div容器之上設定展示容器,其中展示容器的大小和圖片大小相同,最後在圖片容器中新增自訂動畫,並且在動畫不同階段設定遞增的偏移值。

注意

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

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

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

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

使用css3實作圖片輪播特效的步驟(程式碼)

步驟一:使用HTML新增圖片

<div id="container">
    <div id="photo">
        <img  src="1.png" / alt="如何使用css3實現圖片的自動輪播特效(附完整程式碼)" >
        <img  src="2.png" / alt="如何使用css3實現圖片的自動輪播特效(附完整程式碼)" >
        <img  src="3.png" / alt="如何使用css3實現圖片的自動輪播特效(附完整程式碼)" >
    </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實現圖片的自動輪播特效(附完整程式碼)

#更多酷CSS3、javascript特效程式碼,盡在:js特效大全

以上是如何使用css3實現圖片的自動輪播特效(附完整程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板