话不多说 直接上代码
css;">
* {
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;
}
}
动画效果像素根据自己图片大小修改
css;">
<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>
到此这篇关于纯css实现轮播图banner自动轮换效果的文章就介绍到这了,更多相关css实现轮播图banner自动轮换内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
