小編給大家分享一下如何使用css實現(xiàn)無縫輪播圖切換,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
雙河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!
css實現(xiàn)無縫輪播圖切換的方法:首先使用animation屬性設置要綁定到選擇器的keyframes的名稱、完成動畫所花費的時間、動畫的速度曲線、動畫的播放次數(shù);然后使用@keyframes規(guī)則創(chuàng)建輪播動畫,指定每個關鍵幀中圖片的定位樣式。
使用CSS3實現(xiàn):利用animation屬性+@keyframes規(guī)則
(實現(xiàn)一張一張的輪播,肉眼只看見一張圖片)
HTML部分比較簡單,兩個div下包著幾個img標簽;為了實現(xiàn)無縫輪播,注意第一張圖片要與最后一張圖片相同;
<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 } }
這樣圖片就可以輪播了。
但是鼠標放上去的時候圖片還是一直在輪播的,如果我們想讓鼠標放在圖片上時,輪播停止,或者出現(xiàn)一些信息,我們需要加上:hover;設置動畫的狀態(tài),代碼很簡潔:如下
.out:hover .imgs{ animation-play-state:paused; }
這樣我們的輪播效果就出來啦;
看完了這篇文章,相信你對如何使用css實現(xiàn)無縫輪播圖切換有了一定的了解,想了解更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)站標題:如何使用css實現(xiàn)無縫輪播圖切換
本文路徑:http://bm7419.com/article12/igepgc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、App設計、軟件開發(fā)、網(wǎng)站設計公司、電子商務、網(wǎng)站設計
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)