如何使用css實現無縫輪播圖切換

小編給大家分享一下如何使用css實現無縫輪播圖切換，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

css實現無縫輪播圖切換的方法：首先使用animation屬性設置要綁定到選擇器的keyframes的名稱、完成動畫所花費的時間、動畫的速度曲線、動畫的播放次數；然后使用@keyframes規則創建輪播動畫，指定每個關鍵幀中圖片的定位樣式。

使用CSS3實現：利用animation屬性+@keyframes規則

（實現一張一張的輪播，肉眼只看見一張圖片）

HTML部分比較簡單，兩個div下包著幾個img標簽；為了實現無縫輪播，注意第一張圖片要與最后一張圖片相同；

<div class="out">
	<div class="imgs">
		<img src="img/beatuy.jpg"/>
		<img src="img/child.jpg"/>
		<img src="img/girl.jpg"/>
		<img src="img/milk.jpg"/>
		<img src="img/cup.jpg"/>
		<img src="img/dog.jpg"/>
		<img src="img/beatuy.jpg"/>
	</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實現無縫輪播圖切換有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！