一个很简单的banner图滚动纯css

html

     <section id="banner">
        <div class="banner">
            <div class="banner1">
                <img src="images/fw_gaBanner1.png" mode="widthFix" width="100%"  >
            </div>
            <div class="banner2">
                <img src="images/fw_gaBanner2.png" mode="widthFix" width="100%"  >
            </div>
            <div class="banner3">
                <img src="images/fw_gaBanner3.png" mode="widthFix" width="100%"  >
            </div>
            <div class="banner1">
                <img src="images/fw_gaBanner4.png" mode="widthFix" width="100%"  >
            </div>
        </div>
    </section>

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%;
	}
}

完工 简单实用