css3轮播图

 html代码：

<div id="banner">
	<div id="banner_img">
    	<img src="img/11.jpg" alt="">        //图片可替换
		<img src="img/22.jpg" alt="">
		<img src="img/33.jpg" alt="">
	</div>
</div>

css代码：

<style type="text/css">
		#banner{
			width: 600px;
			height: 320px;
			overflow: hidden;
		}
			
		#banner_img{
			width: 1800px;        //图片数量*每张图片的宽度
			height: 320px;
			animation:move 5s infinite;        //动画移动五秒infinite无限循环
		}
			
		img{
			width: 600px;       //单张图片宽度
			height: 320px;        //单张图片高度
			float: left;
		}
			
		@keyframes move{        //帧数100%除以图片数量即可
			0%,25%{
		    	margin-left: 0px;
			}
			35%,60%{
				margin-left: -600px;
			}
			70%,100%{
				margin-left: -1200px;
			}
		}
</style>

 ps：文字部分需要注释