1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
预览地址： 纯css3：radio+label实现轮播图
轮播图这东西，我相信只要是做前端的，肯定都做过，不过大部分应该都是用js来实现的，其实css3也是可以实现轮播图的，而且也可以加一些动画之类的，下边就分享下思路。声明，这里没有贬低 js 的意思，相反， js 能做的， css 基本做不到， css 能做的， js 基本能做到，这里纯粹就是为了分享 css 的一些运用。
css 里有个可以绑定到 <input>上的标签 <label>，它的功能就是当你点击所绑定的这个 <label>的时候，就可以选中相应的 <input>，既然有了这个功能，那就有了控制轮播图的方法了。
通过 css 可以看到，其实这个例子主要用到的就是 <input type="radio">的 :checked 伪类选择器然后通错 css3 的 :nth-of-type(n) 节点选择器控制与之相对应的轮播、按钮，整个例子也没什么难度，也就不废话了。
animation-name： 规定需要绑定到选择器的 keyframe 名称。animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
