纯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>
文章来源：脚本之家，原文链接：https://www.jb51.net/css/745175.html


短视频红海时代，企业如何制定增长策略？
这个域名实名成功了吗-域名及账户问题
TIOBE发布6月编程语言排行榜：Swift迅速上位
每个企业最多注册多少个域名
虚拟主机怎么登录ftp
域名有哪些类型
云服务器购买须知云服务器代理1.4万阅读
二手车电商硝烟再起 大搜车并购车易拍入局