纯CSS3实现图片轮播

1.HTML建立结构

/*
作者：A adiot
*/
<div id="photo">
<div id="photos">
	<img src="images/图片2.jpg />
	<img src="images/图片1.jpg"/>
	<img src="images/图片3.jpg"/>
</div>
</div>
	<--!建立两个div，第一个定义大小，第二个实现轮播-->

2.css代码实现

	/*图片轮播部分*/  

	div.photo{
    width:1200px;
    height:558px;
    <!--下面的图片将设置浮动，设置超出部分隐藏-->
    overflow:hidden;
}
div.photos{
    width:calc(1200px * 3);/*每张图片的宽度为1200px*/
    height:558px;
<!--  
动画属性  
animation:name duration timing-funciton delay iteration-count direction fill-mode play-state  
<!--动画：名称 时长 如何完成一个周期 启动前的延迟间隔 播放次数 是否应该轮流反向播放 规定当动画不播放/当动画结束时，要用到的元素样式 动画是否 正在运行或已停止-->

-webkit-animation:switch 12s ease-out infinite normal;
animation:switch 12s ease-out infinite normal;  

<!--ease-out:动画以低速结束  
infinite：播放次数永远  
normal：动画按正常播放-->


}  
div.photos>img{
    float:left;
    width:1200px;
    height:600px;

}
@-webkit-keyframes switch {
    10%,35%{    /*第一张图片播放所需要的时间*/
        margin-left:0px;  /*第一张图片距离左侧的长度*/
    }
    45%,70%{    /*第二张图片播放所需要的时间*/
        margin-left:-1200px;  /*第一张图片距离左侧的长度*/
    }
    80%,100% {    /*第三张图片播放所需要的时间*/
        margin-left: -2400px;  /*第一张图片距离左侧的长度*/
    }
}