一个简单的纯css轮播图

html

<section id="banner">  
  <div class="banner">
    <div class="banner1">
        <img src=" ">
    </div>
    <div class="banner2">
        <img src=" ">
    </div>
    <div class="banner3">
        <img src=" ">
    </div>
    <div class="banner1">
        <img src=" ">
    </div>
</div>

css

	* {
		margin:0px;
		padding:0px;
	}
	#banner {
		width:100%;
		height:500px;
		overflow:hidden;
	}
	.banner {
		width:400%;
		height:500px;
		animation:banner 10s ease infinite;
	}
	.banner1,.banner2,.banner3 {
		width:25%;
		height:500px;
		overflow:hidden;
		float:left;
	}
	.banner1 img,.banner2 img,.banner3 img {
		width:1920px;
		height:500px;
		position:relative;
		left:50%;
		margin-left:-960px;
	}
	@keyframes banner {
		0% {
		margin-left:0px;
	}
	34% {
		margin-left:0px;
	}
	39% {
		margin-left:-100%;
	}
	64% {
		margin-left:-100%;
	}
	69% {
		margin-left:-200%;
	}
	94% {
		margin-left:-200%;
	}
	99% {
		margin-left:-300%;
	}
	100% {
		margin-left:-300%;
	}
}