纯css3实现图片轮播

用css3的动画可以实现图片轮播

无非就是两种类型：
　左右滚动类型，　渐变类型

１　左右滚动
定义一个大盒子
在一个小盒子里面　装３张图片（这里用３张图片为例子）
三张图片可以向左浮动，大盒子　overflow :hidden
小盒子增加css3动画就可以了，无非就是让它来会滚动，滚动距离是大盒子宽度

 @-webkit-keyframes animation {
            0% {
                margin-left: 0;
            }
            23% {
                margin-left: 0;
            }
            33% {
                margin-left: -600px;
            }
            56% {
                margin-left: -600px;
            }
            66% {
                margin-left: -1200px;
            }
            90% {
                margin-left: -1200px;
            }
            100% {
                margin-left: 0;
            }
        }

２　渐变类型
　　可以让三张图片叠加在一起，position:absolute，和每张图片的z-index　;
　　通过动画关键帧　改变　z-index和opacity　就可以实现渐变的三张图片轮播

  @-webkit-keyframes animation１ {
            0%, 33.32333333333334% { opacity: 1; z-index: 5; }
            33.333333333333336%, 100%   { opacity: 0; z-index: -1; }
        }