目录
任务描述
相关知识
动画执行次数
动画反向播放
编程要求
任务描述
本关任务：用 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 都是需要以分号;结尾的。
效果如下：
<!doctype 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>
