css輪播圖如何實(shí)現(xiàn)

發(fā)布時(shí)間：2022-04-22 10:48:17 來源：億速云閱讀：138 作者：iii 欄目：大數(shù)據(jù)

本篇內(nèi)容主要講解“css輪播圖如何實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css輪播圖如何實(shí)現(xiàn)”吧!

具體操作步驟：

1、準(zhǔn)備了3張大小相同的圖片，將圖片的文件名命名為1.png，2.png，3.png。

2、把你想要展示圖片橫排放在一個(gè)圖片容器里面。

3、圖片容器外再加一個(gè)展示容器，圖片大小就是展示容器大小。

具體操作代碼如下：

<div id="container">
<div id="photo">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>

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;
}
}

到此，相信大家對(duì)“css輪播圖如何實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

css輪播圖如何實(shí)現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽