阿里云優惠券 先領券再下單

話不多說 直接上代碼

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

/* 動畫 */
@keyframes animateImg {
0% {
left: 0px;
}

20% {
left: -0px;
}

40% {
left: -1146px;
}

60% {
left: -2292px;
}

80% {
left: -3438px;
}

100% {
left: 0px;
}
}

動畫效果像素根據自己圖片大小修改

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

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

申請創業報道，分享創業好點子。點擊此處，共同探討創業新機遇！