CSS3 实现 Loading 动画

最近本人正在极客学院学习 HTML5 系列课程，这么课程涵盖的内容也是非常的多，虽然内容十分简单容易理解，但是非常难以记忆，比如 CSS3 的一些属性。今天所要介绍的 CSS3 Loading 动画也是极客学院里所介绍的内容，感兴趣的同学也可以前去观看视屏。

Loading one

第一种加载动画的效果，就是这么一个图在不停的转啊转，动态图就不在这里展示了，太过于麻烦了，想看效果的同学学习之后可以自己写了查看。好了，下面我们就来看看代码。

首先，我们先定义一下 HTML 代码，为了方便这里我只粘贴核心代码

 <div class="box">
        <div class="loading">
            <i></i>
        </div>
    </div>

div 下面我们使用了 i 标签，不要问为什么，你也可以换成 p 标签或其他任何标签。

下面就用 CSS　对我们的Html 进行修饰

.box {
            width: 100%;
            padding: 3%;
     }


  .loading {
        width: 30%;
        height: 250px;
        border: 1px solid chocolate;
        box-sizing: border-box;
        margin: 10px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

这里解释一下，margin: 10px auto; 这一行，将上下外边距设置为 10px, 左右设置为 auto，这样可以达到将我们的元素水平居中的目的。

还有这里的 box-sizing: border-box 是什么意思呢？我们将宽度设置为了父元素的 30%,而我们又设置了边框，那这个边框占据的大小算不算在当前元素的宽度中呢？这里我们设置的值就是说明，加上边框占据的大小，当前元素占父元素的 30%。

display,align-items,justify-content 这三个属性是为了将 i 标签中的内容放置在 div 的中部。首先利用 display 属性将div 设置成弹性盒子元素，然后利用 align-items 设置元素在纵轴上居中，justify-content 设置元素在横轴上居中。注意居中效果必须在这三种元素同时存在时才有效，因为后两个属性是依赖于第一个属性的。

 .loading i {
            width: 35px;
            height: 35px;
            position: relative;
            display: block;
            border-radi