如何使用css實(shí)現(xiàn)無縫輪播圖切換-創(chuàng)新互聯(lián)
小編給大家分享一下如何使用css實(shí)現(xiàn)無縫輪播圖切換，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、
自適應(yīng)網(wǎng)站建設(shè)、程序開發(fā)、微網(wǎng)站、微信小程序定制開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的
網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。
css實(shí)現(xiàn)無縫輪播圖切換的方法：首先使用animation屬性設(shè)置要綁定到選擇器的keyframes的名稱、完成動(dòng)畫所花費(fèi)的時(shí)間、動(dòng)畫的速度曲線、動(dòng)畫的播放次數(shù)；然后使用@keyframes規(guī)則創(chuàng)建輪播動(dòng)畫，指定每個(gè)關(guān)鍵幀中圖片的定位樣式。
使用CSS3實(shí)現(xiàn)：利用animation屬性+@keyframes規(guī)則
（實(shí)現(xiàn)一張一張的輪播，肉眼只看見一張圖片）
HTML部分比較簡單，兩個(gè)div下包著幾個(gè)img標(biāo)簽；為了實(shí)現(xiàn)無縫輪播，注意第一張圖片要與最后一張圖片相同；
最外層div設(shè)置ovflow:hidden;position: relative;既然最外層div設(shè)置了position: relative;所以內(nèi)層div需要設(shè)置position: absolute;使得其運(yùn)動(dòng)相對父元素而言；
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
}
}這樣圖片就可以輪播了。
但是鼠標(biāo)放上去的時(shí)候圖片還是一直在輪播的，如果我們想讓鼠標(biāo)放在圖片上時(shí)，輪播停止，或者出現(xiàn)一些信息，我們需要加上：hover;設(shè)置動(dòng)畫的狀態(tài)，代碼很簡潔：如下
.out:hover .imgs{
animation-play-state:paused;
}這樣我們的輪播效果就出來啦；
看完了這篇文章，相信你對如何使用css實(shí)現(xiàn)無縫輪播圖切換有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
當(dāng)前文章：如何使用css實(shí)現(xiàn)無縫輪播圖切換-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：
http://www.weahome.cn/article/goeso.html
重慶分公司
重慶分公司
