纯CSS实现轮播图

实现轮播图,如下效果:

1
2
3

代码展示

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

wheelPlayer.html
1
2
3
4
5
<div class="wheelPlayer wheelAnimate">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

CSS 样式配置:

wheelPlayer.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.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
A
B
C

单个模块动画过程分析

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

初始化位置

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

 

动画整体流程

  • 1% ~ 33%1A 移动 到 C 的位置
  • 33% ~ 66%1C 移动 到 B 的位置
  • 66% ~ 100%1B 移动 到 A 的位置

 

拆解过程 将1X 移动到 Y 位置的过程

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

 

拆解过程 将1A 移动到 C 位置的过程中移动 (只有这个状态比较特殊,需增加渐变显示的效果)

  • 只需要在1% ~ 11%这个移动操作中添加效果
    • 1% ~ 5% :将 1 透明度 从 1降低到0
    • 5% ~ 7% :将 1 保持 透明度为0
    • 7% ~ 11% :将 1 透明度 从 0还原到1

整体运用动画

实现效果

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

1
2
3
4
5
6
7
8
9
.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
2
3

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

升级效果

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

1
2
3
4
5
6
7
8
9
.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;
}

启动
1
2
3
  • 本文作者: zhuzhuxia
  • 本文链接: https://www.ofind.cn/blog/Front/纯CSS实现轮播图.html
  • 温馨提示: 由于原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处, 方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力!