margin: 0;
padding: 0;
}.container {
margin:300px auto;
height: 400px;
width: 1146px;
overflow: hidden;
}/* .wrap */
.wrap {
position:" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 純css實(shí)現(xiàn)輪播圖banner自動(dòng)輪換效果

純css實(shí)現(xiàn)輪播圖banner自動(dòng)輪換效果

時(shí)間：2024-02-24 02:50:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-24 02:50:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

純css實(shí)現(xiàn)輪播圖banner自動(dòng)輪換效果：

話不多說(shuō) 直接上代碼

* {
margin: 0;
padding: 0;
}

.container {
margin:300px auto;
height: 400px;
width: 1146px;
overflow: hidden;
}

/* .wrap */
.wrap {
position: relative;
width:10000px;
left: 0px;
animation: animateImg ease 5s infinite normal;
}

/* 圖片大小 */
.wrap img {
width: 1146px;
float: left;
height: 400px;
display: block;
}

/* 動(dòng)畫 */
@keyframes animateImg {
0% {
left: 0px;
}

20% {
left: -0px;
}

40% {
left: -1146px;
}

60% {
left: -2292px;
}

80% {
left: -3438px;
}

100% {
left: 0px;
}
}


動(dòng)畫效果像素根據(jù)自己圖片大小修改

<div class="container">
<div class="wrap">
<img src="images/banner1.jpg"alt="" />
<img src="images/banner2.jpg"alt="" />
<img src="images/banner3.jpg"alt="" />
<img src="images/banner4.jpg"alt="" />
</div>

文章來(lái)源：腳本之家，原文鏈接：https://www.jb51.net/css/745175.html

關(guān)鍵詞：效果,實(shí)現(xiàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉