您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“css如何實(shí)現(xiàn)輪播圖效果”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“css如何實(shí)現(xiàn)輪播圖效果”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
1、準(zhǔn)備了3張大小相同的圖片,將圖片的文件名命名為1.png,2.png,3.png。
2、把你想要展示圖片橫排放在一個(gè)圖片容器里面。
3、圖片容器外再加一個(gè)展示容器,圖片大小就是展示容器大小。
具體操作代碼如下:
<div id="container">
4、在圖片容器上添加自定義動(dòng)畫,在動(dòng)畫不同階段設(shè)置遞增的偏移值。(圖片處代碼添加 float 效果,所以不用考慮margin 問題;代碼中設(shè)置的動(dòng)畫階段(如:35%~60%)是動(dòng)畫停留部分,和上一階段空余時(shí)間(如25%~35%)即為動(dòng)畫切換部分,時(shí)間長短可以自己試驗(yàn)把控。)
#container {
width: 400px;
height: 300px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
height: 300px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}
讀到這里,這篇“css如何實(shí)現(xiàn)輪播圖效果”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。