分享CSS3中3个Loading 设计的实例代码（二）-tutorial css-php.cn

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

Loading one

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

Paste_Image.png

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

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

Salin selepas log masuk

可见，这指示两个 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;

    }

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

好了，既然动画效果已经定义好了，那就去给我们的 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;
    }

Salin selepas log masuk

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

Loading two

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

Paste_Image.png

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

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

Salin selepas log masuk

这里的 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;
    }

Salin selepas log masuk

可见在第四个块中有这么一行代码 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);
        }
    }

Salin selepas log masuk

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

Loading three

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

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>

Salin selepas log masuk

可以很明显的看到，这里多包涵了一层 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;
    }

Salin selepas log masuk

这个时候我们虽然有 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;
        }
    }

Salin selepas log masuk

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% ： 图形回到起始位置。

Salin selepas log masuk

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

    .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;
    }

Salin selepas log masuk

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

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

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

Atas ialah kandungan terperinci 分享CSS3中3个Loading 设计的实例代码（二）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!