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中文網其他相關文章！
