Rumah  >  Artikel  >  hujung hadapan web  >  分享CSS3中3个Loading 设计的实例代码(二)

分享CSS3中3个Loading 设计的实例代码(二)

零下一度
零下一度asal
2017-05-05 15:20:591510semak imbas

这是 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>

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

分享CSS3中3个Loading 设计的实例代码(二)

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

分享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>

可以很明显的看到,这里多包涵了一层 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视频教程

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn