通过使用animation实现轮播滚动
- style
.slide {
position: relative;
margin: auto;
width: 500px;
height: 200px;
overflow: hidden;
color: #FFFFFF;
text-align: center;
}
.slide ul {
margin: 10px 0;
padding: 0;
width: 9999px;
transition: all 0.5s;
}
.slide .slide-auto {
animation: marginLeft 12s infinite;
}
.slide li {
float: left;
width:500px;
height: 200px;
list-style: none;
line-height: 200px;
}
.slide li:nth-child(1){
background: #ac24bb;
}
.slide li:nth-child(2){
background: #be65ae;
}
.slide li:nth-child(3){
background: #cc8674;
}
@keyframes marginLeft {
0%, 25%{
margin-left: 0;
}
25%, 50% {
margin-left: -500px;
}
50%, 75% {
margin-left: -1000px;
}
75%, 99.9% {
margin-left: -500px;
}
99.9%, 100% {
margin-left: -0px;
}
}
- div
<div class="slide">
<ul class="slide-auto">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>