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

话不多说 直接上代码

* {
     margin: 0;
     padding: 0;
 }

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

 
 .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实现轮播图banner自动轮换效果的文章就介绍到这了,更多相关css实现轮播图banner自动轮换内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！