纯CSS实现轮播图

实现轮播图，如下效果：

代码展示

这里涉及到css3中的动画效果 animate 和 @keyframes 先贴一下代码：

wheelPlayer.html

<div class="wheelPlayer wheelAnimate">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS 样式配置：

wheelPlayer.css

.wheelPlayer{
   padding: 20px 0;
   margin: auto;
   width: 350px;
}
.wheelPlayer div{
   position: relative;
   height: 25px;
   line-height: 26px;
   width: 70px;
   text-align: center;
   border: 1px solid gray;
}
.wheelAnimate div{
   animation: whellPlayer 9s infinite;
   -moz-animation: whellPlayer 9s infinite;
   -webkit-animation: whellPlayer 9s infinite;
}
.wheelPlayer div:nth-of-type(1){
   animation-delay: -6s;
   -moz-animation-delay: -6s;
   -webkit-animation-delay: -6s;
}
.wheelPlayer div:nth-of-type(2){
   animation-delay: -3s;
   -moz-animation-delay: -3s;
   -webkit-animation-delay: -3s;
   margin-top:  -27px;
}
.wheelPlayer div:nth-of-type(3){
   animation-delay: -0s;
   -moz-animation-delay: 0s;
   -webkit-animation-delay: 0s;
   margin-top:  -27px;
}

动画实现思路

单个模块动画过程分析

以分析 1 模块的移动过程，2 3的移动过程是相同的，只是他们出发动画的时间不同就可以了。　　

初始化位置
1% 以及100% :将 1 的初始/重置位置设置到 A 的位置

动画整体流程
1% ~ 33% 将 1 从 A 移动到 C 的位置
33% ~ 66% 将 1 从 C 移动到 B 的位置
66% ~ 100% 将 1 从 B 移动到 A 的位置

拆解过程将1 从 X 移动到 Y 位置的过程
使用前 11% 的时间去做移动的操作
1% ~ 11% :将 1 从 A 移动到 C 的位置
33% ~ 44% :将 1 从 C 移动到 B 的位置
66% ~ 77% :将 1 从 B 移动到 A 的位置
使用后 22% 的时间做保持动画停顿的操作
11% ~ 33% :保持 1 在 C 的位置
44% ~ 66% :保持 1 在 B 的位置
77% ~ 100%:保持 1 在 A 的位置

拆解过程将1 从 A 移动到 C 位置的过程中移动 (只有这个状态比较特殊，需增加渐变显示的效果)
只需要在1% ~ 11%这个移动操作中添加效果
1% ~ 5% :将 1 透明度从 1降低到0
5% ~ 7% :将 1 保持透明度为0
7% ~ 11% :将 1 透明度从 0还原到1

整体运用动画

实现效果

动画的执行过程就解析完毕了，那么怎么让三块内容依次执行呢？这里只需要来让他们开始执行的时间错开就可以了。

.wheelPlayer div:nth-of-type(1){
    animation-delay: 0s;
}
.wheelPlayer div:nth-of-type(2){
    animation-delay: 3s;
}
.wheelPlayer div:nth-of-type(3){
    animation-delay: 6s;
}

启动

但是这不是我们需要的效果！

升级效果

我们需要一载入就看到动起来的三张图，这时候只需要将延时值设置为负数，就可以了。也就是说，在我们还没有载入页面的时候，就需要动画动起来了，我们载入页面以后，1已经执行 6s了，2已经执行3s了，而3才刚刚开始要动起来。

.eg2 div:nth-of-type(1){
    animation-delay: -6s;
}
.eg2 div:nth-of-type(2){
    animation-delay: -3s;
}
.eg2 div:nth-of-type(3){
    animation-delay: 0s;
}

启动