话很少说 立即上编码
* {
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全自动轮换內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！