css实现滚动轮播

通过使用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>