html图片自动轮换效果,纯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;

}

}

动画效果像素根据自己图片大小修改