纯css实现轮播图banner自动轮换效果

话不多说 直接上代码

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

提示：现在腾讯云新人点击注册然后实名认证后，可以点此一键领取2860元代金券，然后点此进入腾讯云活动页面参加优惠力度非常大的腾讯云3年和5年时长服务器活动，一次性买多年，免得续费贵，这样就可以获得最大的优惠折扣，省钱。