目录
本关任务:用 CSS3 实现loading
效果。效果图如下:
为了完成本关任务,你需要掌握:1.动画执行次数,2.动画反向播放。
需要实现的效果如下:
动画从开始到结束(0%
到100%
)称为一个动画的周期,也就是说,动画执行了一次。
基本的结构如下(这里省略了部分样式):
- <div class="box">
- <span>0%span>
- <span>100%span>
- div>
- .box{ width: 0px;}
效果图如下:
先创建一个动画名称为progress
的动画。代码如下:
- @keyframes progress{
- 0% { width: 0px; }
- 100%{ width: 300px; }
- }
然后把这个动画绑定到class="box"
元素上就可以了。代码如下:
- .box{
- animation: progress 2s ease;
- }
效果图如下:
可以看出,这里动画只执行了一次。如何让它执行多次呢?这里用到animation-iteration-count
属性,它的值有:
n
, 表示动画播放次数的数值;infinite
,表示动画无限次播放;这里先执行3
次,代码如下:
- .box{
- animation: progress 2s ease 3;
- }
效果如下:
上面进度条从100%
到0%
时是直接消失的,怎么让它逐渐消失呢?
第一种思路:把从0%
到100%
,100%
到0%
看作动画的一个周期。这时总完成时间就会翻倍。
实现代码如下:
- @keyframes progress{
- 0% { width: 0px;}
- 50%{ width: 300px;}
- 100%{ width: 0px;}
- }
- .box{
- animation: progress 4s ease;
- }
效果如下:
因为这里的动画比较简单,这样写没什么问题。但动画效果比较复杂时,需要计算的东西就比较多了,也比较麻烦。
第二种思路:利用属性animation-direction
,它规定了动画是否在下一周期逆向播放。它的值有:
normal
,默认值,表示正常播放;reverse
,表示动画反向播放;alternate
,动画在奇数次(1、3、5...
)正向播放,在偶数次(2、4、6...
)反向播放;可以利用animation-direction: alternate;
让动画第二次反向播放。
实现代码如下:
- .box{
- animation: progress 2s ease 3 alternate;
- }
效果如下:
注意:alternate
这个值在 动画次数≥2 的时候才有效果;
根据提示,在右侧编辑器补充代码,实现loading
效果。要求如下:
loading
;1s
,里面的为1.5s
;linear
;提示:
animation-direction: reverse;
可以实现动画反向播放;为了方便评测, CSS 都是需要以分号;
结尾的。
效果如下:
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document
- title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- @keyframes loading{
- 0%{ transform: rotate(0deg); }
- 100%{ transform: rotate(360deg); }
- }
- .box{
- position: relative;
- width: 100%;
- height: auto;
- background: black;
- }
- .big{
- width: 40px;
- height: 40px;
- border: 5px solid red;
- border-radius: 50%;
- border-color: red red transparent transparent;
- position: absolute;
- left: 100px;
- top: 100px;
- /************ Begin **************/
- animation:loading 1s linear infinite;
-
- /************* End ***************/
- }
- .small{
- width: 20px;
- height: 20px;
- border: 5px solid red;
- border-radius: 50%;
- border-color: transparent transparent red red;
- position: absolute;
- left: 110px;
- top: 110px;
- /************ Begin **************/
-
- animation:loading 1.5s linear infinite reverse;
-
-
- /************* End ***************/
- }
-
- style>
- head>
- <body>
- <div class="box">
- <div class="big">div>
- <div class="small">div>
- div>
- body>
- html>