脚本宝典收集整理的这篇文章主要介绍了纯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>
到此这篇关于纯css实现轮播图banner自动轮换效果的文章就介绍到这了,更多相关css实现轮播图banner自动轮换内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的纯css实现轮播图banner自动轮换效果全部内容，希望文章能够帮你解决纯css实现轮播图banner自动轮换效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。