css實現無縫輪播圖切換的方法:首先使用animation屬性設定要綁定到選擇器的keyframes的名稱、完成動畫所花費的時間、動畫的速度曲線、動畫的播放次數;然後使用@keyframes規則建立輪播動畫,指定每個關鍵影格中圖片的定位樣式。
本教學操作環境:windows7系統、css3版,此方法適用於所有品牌電腦。
(推薦教學:CSS影片教學)
使用CSS3實作:利用animation屬性@keyframes規則
(實現一張一張的輪播,肉眼只看見一張圖片)
HTML部分比較簡單,兩個div下包著幾個img標籤;為了實現無縫輪播,注意第一張圖片要與最後一張圖片相同;
<div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > <img src="img/child.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > <img src="img/girl.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > <img src="img/milk.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > <img src="img/cup.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > <img src="img/dog.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > <img src="img/beatuy.jpg"/ alt="怎麼用css實現無縫輪播圖切換?" > </div> </div>
最外層div設定ovflow:hidden;position: relative;既然最外層div設定了position: relative;所以內層div需要設定position: absolute;使得其運動相對父元素而言;
CSS程式碼如下:
.out{ width: 200px; height: 100px; overflow: hidden; position: relative; } .imgs { width: 1400px; height: 100px; position: absolute; animation: ppt 10s linear infinite; } img { float: left; width: 200px; height: 100px; } @keyframes ppt { 0% { left: 0px } 20% { left: -250px } 40% { left: -500px } 60% { left: -750px } 80% { left: -1000px } 100% { left: -1200px } }
這樣圖片就可以輪播了。
但是滑鼠放上去的時候圖片還是一直在輪播的,如果我們想讓滑鼠放在圖片上時,輪播停止,或者出現一些訊息,我們需要加上:hover;設定動畫的狀態,程式碼很簡潔:如下
.out:hover .imgs{ animation-play-state:paused; }
這樣我們的輪播效果就出來啦;
更多程式設計相關知識,請造訪:程式設計學習! !
以上是怎麼用css實現無縫輪播圖切換?的詳細內容。更多資訊請關注PHP中文網其他相關文章!