分享CSS3中3个Loading 设计的实例代码（二）

这是 CSS Loading 设计的第二篇文章，其实很多内容都包含在第一篇中，所以这篇文章中对属性的介绍也会相对少些，如果碰到不明白的属性，请参考上一篇文章中的内容。
CSS Loading 设计（一）

Loading one

Paste_Image.png

这样看起来没有任何动画效果，如果在这里展示我还要用屏幕录制视屏，然后转化为图片，感觉太过于麻烦，不知道有没有什么简便的方法，如果有，请教教我。好了，下面我们看看这个动画效果该怎么做，首先还是来看看 Html 代码

  <p class="box">
        <p class="loader">
            <i></i>
            <i></i>
            <i></i>
      </p>
  </p>

可见，这指示两个 p 标签的嵌套，十分的简单，下面就看看 CSS 代码

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

    .loader {
        width: 30%;
        height: 200px;
        margin: 50px auto;
        border: 1px solid chocolate;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .loader i {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #333333;
        position: absolute;
        opacity:0;

    }

可见，这些代码和第一篇文章中的几乎一模一样，其实不止是这个效果，接下来的三个效果也都是这么设计的，唯一不同的地方就是动画的设计不同。

    @-webkit-keyframes loading {
        0%{
            transform: scale(0);
            opacity: 0;
        }
        5%{
            opacity: 1;
        }
        100%{
            transform: scale(1);
            opacity:0;
        }
    }

下面我来解释一下这个动画到底是什么意思。

1. 0% ： 这个时候将我们画的圆形缩放为 0%，透明度也是 0
2. 5% ： 这个时候将透明度设置为 1 ，也就是图形是出于可见的状态，
  但是这个时候图形已经被缩放为 0，所以还是什么东西都看不到。
3. 100% : 注意在 100 % 的状态下，图形被缩放为原始状态，但是透明度为0，这说明了什么？
  这说明在 5% - 100% 过程中，图形逐渐出现，但是透明度逐渐降低，这样就会出现一个动画效果。

好了，既然动画效果已经定义好了，那就去给我们的 i 标签设置吧。

    .loader i:nth-child(1){
        -webkit-animation: loading 1s linear 0s infinite;
    }
    .loader i:nth-child(2){
        -webkit-animation: loading 1s linear 0.2s infinite;
    }
    .loader i:nth-child(3){
        -webkit-animation: loading 1s linear 0.4s infinite;
    }

好了，到这里第一个动画效果就出现了。建议亲自实践一下，看一下具体的效果，个人感觉这个动画还是挺好看的。

Loading two

Paste_Image.png

说实话，这是本人最喜欢的一个动画效果，十分有趣。看 Html 代码

<p class="box">
    <p class="loader">
        <p class="loader-child">
            <i></i>
            <i></i>
        </p>
    </p>
</p>

这里的 CSS 代码和上面就有一点差异了，下面我来分析一下

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

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

    .loader-child {
        width: 40px;
        height: 40px;
        position: relative;
    }

    .loader-child i {
        display: block;
        border: 2px solid #333333;
        border-color: transparent #333333; 
        border-radius: 50%;
        position: absolute;
    }

    .loader-child i:first-child {
        width: 35px;
        height: 35px;
        top: 0;
        left: 0;
        -webkit-animation: loading 1s ease-in-out 0s infinite;
    }

    .loader-child i:last-child {
        width: 15px;
        height: 15px;
        top: 10px;
        left: 10px;
        -webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
    }

可见在第四个块中有这么一行代码 border-color: transparent #333333; 本来我们设定的是画一个圆形，由于我们需要的并不是一个圆形，设置了这行属性之后，就会每隔 1/4 个圆弧变换颜色属性，也就是透明和 #333333 进行变化，就达到了我们想要的图形效果。

还有，我们针对每个 i 标签设置了 top,left 属性，这两个属性需要配合 position 进行使用，具体怎么使用我们也在上一篇文章做了介绍，设置了这么两个属性之后，达到的效果就是一个大圆包含一个小圆，也就是图片中的效果。

注意看 last-child 动画效果，我们在末尾加上了一个 reverse, 意思就是逆时针执行。

好了，下面我们来看看动画

    @-webkit-keyframes loading {

        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }

动画是怎么样一个效果，结合我上面对动画的执行分析，你可能就已经能模拟出这个动画的效果了，是的，非常炫酷的一个效果。

Loading three

Paste_Image.png

这个动画我感觉非常的难，由于我接触 CSS 也才几天光景，很多属性的设置我都不明所以然，一直在网上搜寻各种资料，直到现在理解的也不是很透彻，下面就将我所掌握的分享一下，至于那些我也不太清楚地属性，还希望各路大仙教教我。还是老样子，先来看看 HTML 代码

<p class="box">
    <p class="loader">
        <p class="loader-child">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </p>
    </p>
</p>

可以很明显的看到，这里多包涵了一层 p 标签，主要是为了配合 position 属性的使用。

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

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

    .loader-child{
        width: 80px;
        height: 20px;
        position: relative;
    }

    .loader-child i{
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #333333;
        margin-right: 10px;
        position: absolute;
    }

这个时候我们虽然有 5 个 i 标签，但是却只能看到一个圆形，不是预期的 5 个，这是这么回事？我也不太清楚。

下面来看看动画效果

    @-webkit-keyframes loading {
        0%{
            left: 100px;
            top: 0;
        }
        80%{
            left:0;
            top:0;
        }
        85%{
            left:0px;
            top:-20px;
            width: 20px;
            height: 20px;
        }
        90%{
            width: 40px;
            height: 20px;
        }
        95%{
            left: 100px;
            top: -20px;
            width: 20px;
            height: 20px;
        }
        100%{
            left: 100px;
            top:0;
        }
    }

1. 0% - 80% ： 图形从距离父元素左边距为 100 px 的位置移动到 0 px，上边距不变，也就是水平移动。
2. 80% - 85% ： 图形的左边距不变，但是上移 20 px，而且图形的宽高设置为 20px
3. 85% - 90% :  图形的位置不变化，但是此时图形的宽拓宽到 40px
4. 90% - 95% ： 图形开始向右移动，移动100 px并且将宽复原为 20px
5. 95% - 100% ： 图形回到起始位置。

下面就是对每个元素设置动画效果

    .loader-child i:nth-child(1){
        -webkit-animation: loading 2s linear 0s infinite;
    }
    .loader-child i:nth-child(2){
        -webkit-animation: loading 2s linear -0.4s infinite;
    }
    .loader-child i:nth-child(3){
        -webkit-animation: loading 2s linear -0.8s infinite;
    }
    .loader-child i:nth-child(4){
        -webkit-animation: loading 2s linear -1.2s infinite;
    }
    .loader-child i:nth-child(5){
        -webkit-animation: loading 2s linear -1.6s infinite;
    }

好了，就讲到这里，欢迎反馈，互相学习。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

以上是分享CSS3中3个Loading 设计的实例代码（二）的详细内容。更多信息请关注PHP中文网其他相关文章！