我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
前言
众所周知，CSS除了简单的添加样式之外，还可以实现动画效果。所以，这次文章将介绍用纯 CSS 实现一个加载动画。上图便是效果展示。这个炫酷的 Loading 可以加入到自己的个人小项目中或者平时的练手案例中。
预备知识
整个动画的实现过程并不复杂，了解一些基本的动画属性即可。
@keyframes
用于创建动画规则，关键帧。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
animation
这是所有动画的简写属性，有如下属性:
animation-name：设置需要绑定到元素的动画名称；animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；animation-timing-function：设置动画的速度曲线，默认为 ease；animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；animation-delay：设置动画开始之前的延迟时间，默认为 0；animation-iteration-count：设置动画被播放的次数，默认为 1；animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；animation-play-state：设置动画是正在运行还是暂停，默认是 running；
其中，animation-name 来自于 @keyframes 的自定义动画名称。拿本次动画里的 animation 举例：
animation: animate 5s linear infinite;
动画名称是 animate ，动画完成一个周期需要 5s，linear 意思是从头到尾速度相同，infinite 意思是指定动画播放无限次。
transform
应用于元素的 2D 或 3D 转换。这个属性可以将元素旋转，缩放，移动，倾斜等，默认值是 none。此处动画将用到 roate(angle) ，定义 2D 旋转，在参数中规定角度。
过程实现
整体效果和代码将用码上掘金来展示：
在这上面，代码和效果清晰可见，并且可以自己修改样式代码来实现不同的效果。比如下面这一段代码：
.loader span:nth-child(2){
animation-direction:reverse;
border-radius: 10% 90% 10% 90% / 10% 90% 10% 90% ;
}
animation-direction 属性还有其他两个值，分别是 alternate 以及 alternate-reverse，把现有的 reverse 换成它们，又会有其他的效果，大家可以试试。
在这里，大家是否注意到一个细节，就是如何让这个动画在页面居中位置显示。感兴趣的朋友可以在上面的样式中查看。在body里的属性中，min-height = 100vh 是关键。该属性设置元素的最低高度。100vh 是指当前浏览器的视窗高度。
对于 border-radius 属性的数据，是通过如下方式捏出来的：
这种数据格式就是这般，直接在 border-radius 上凭自己感觉改数据也可。改完之后就可以做出另外一番风格的 Loading 了。就像下面这样：
最后
整个Loading 效果就是这般，大家可以在上面的码上掘金里多尝试尝试，或许你能造出更加炫酷的 Loading。
源码地址：Loading...
