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