CSS

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

作者:admin 2017-05-27 我要评论( )

最近本人正在学习 HTML5 系列课程,这么课程涵盖的内容也是非常的多,虽然内容十分简单容易理解,但是非常难以记忆,比如 CSS3 的一些属性。今天所要介绍的 CSS3...

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

Loading one


demo01.gif

第一种加载动画的效果,就是这么一个图在不停的转啊转,下面我们就来看看代码。

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

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

p下面我们使用了 i标签,不要问为什么,你也可以换成 p标签或其他任何标签。下面就用 CSS对我们的Html进行修饰

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.loading {
    display: flex;

    width: 30%;
    height: 250px;
    margin: 50px auto;

    border: 1px solid #699;

    justify-content: center;
    align-items: center;
}

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

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

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

 .loading i {
        width: 35px;
        height: 35px;
        position: relative;
        display: block;
        border-radius: 50%;
        background: linear-gradient(transparent 0%, transparent 50%,
                #699 50%, #699 100%);
        -webkit-animation: loading 1s linear 0s infinite;
    }

看看 background 属性,其中设置了线性渐变效果,其中的参数也是我刚接触不能够理解的,不明白为什么要这么写,其实可以这么理解,从0%70% 设置成透明,从 70%100% 设置成 #699,这样我们就看到了上述图片中图像。

-webkit-animation 属性就是为当前元素指定了一个动画,第一个参数是动画的名称,也即 loading ,该动画是需要我们自己去定义的,具体定义下面再介绍。第二个参数是动画持续的时长,第三个参数是动画的速度曲线,第四个参数是动画延迟时间,第五个参数是动画播放的次数。下面看看我们自己定义的动画

@-webkit-keyframes loading {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

十分容易理解,就是在动画的不同阶段进行元素的旋转。值得注意的是,这种定义方式只能在 ChromeSafari 浏览器中能看到动画效果,那么如果我们想在火狐浏览器中也显示动画效果,那么我们需要这么定义。

 @-moz-keyframes  loading-moz{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
 }

引用的时候 -moz-animation: loading-moz 1s linear 0s infinite;几乎是相同的,只不过换个头部而已(至于在其他浏览器中怎么定义,自己去试试吧)。

Loading two


demo02.gif

这个动画的效果就是五个条纹像波浪一样摆动。下面就来书写这么一个效果。首先是HTML,毫无悬念,十分简单的布局

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

其实这个效果几乎所有的CSS 代码都是和上面一致的,来看看

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.loading {
    display: flex;

    width: 30%;
    height: 250px;
    margin: 50px auto;

    border: 1px solid #699;

    justify-content: center;
    align-items: center;
}

.loading i {
    position: relative;

    width: 6px;
    height: 32px;
    margin-right: 6px;

    border-radius: 3px;
    background-color: #699;
}

这里唯一多出来的一行代码就是 .loader i 中的 margin-right属性,为什么会多这么一行呢?因为我们有 5 个 i 标签,如果没有这行属性设定,那么所有的标签就回重叠在一起了。接下来就是动画效果的设定了.

@-webkit-keyframes loading {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(1);
    }
}

.loading i:first-child {
    -webkit-animation: loading 1s linear .1s infinite;
}

.loading i:nth-child(2) {
    -webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
    -webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
    -webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
    -webkit-animation: loading 1s linear .5s infinite;
}

可见我们设置的动画效果就是在 50% 的时候,将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定,不同的是每一个标签中的动画延迟执行时间不同,这样就可以达到波浪的效果,还有一点值得注意的是,我们发现我们指定的 动画速度曲线不同了,其实这个地方我们有必要了解一下所有可能的取值,如下

linear  动画从头到尾的速度是相同的。
ease    默认。动画以低速开始,然后加快,在结束前变慢。 
ease-in 动画以低速开始。    
ease-out    动画以低速结束。
ease-in-out 动画以低速开始和结束。

Loading Three


demo03.gif

这次要做的效果是动态转圈加载的效果,下面来看看如何实现这里的 HTML 代码和以上两个可能有点差别,这里多了一个 p 标签,目的是让画出的图形能够居中。

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

看看 CSS 代码

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

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

    .loading {
        position: relative;
    }

    .loading i {
        display: block;
        width: 15px;
        height: 15px;
        background-color: #333333;
        border-radius: 50%;
        position: absolute;
    }

要理解为什么这些代码会画出如图所示的图形,那么我们必须要对 position 属性有一个透彻的了解,首先我们来看看我们用到的两个属性值是什么意思.

absolute    
  生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    
  生成相对定位的元素,相对于其正常位置进行定位。
  因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

知道了意思,再来分析以上的代码,我们在loading 元素中定义了一个 position:relative 由于没有相应的内容将其撑起,所以这个时候loading 实际上为中心的一个点,然后我们将 i 标签设置为绝对定位,也就是围绕着这个点进行画圆即可。下面来看看画圆的代码

.loading i:nth-child(1) {
    top: 25px;
    left: 0px;
}

.loading i:nth-child(2) {
    top: 17px;
    left: 17px;
}

.loading i:nth-child(3) {
    top: 0px;
    left: 25px;
}

.loading i:nth-child(4) {
    top: -17px;
    left: 17px;
}

.loading i:nth-child(5) {
    top: -25px;
    left: 0px;
}

.loading i:nth-child(6) {
    top: -17px;
    left: -17px;
}

.loading i:nth-child(7) {
    top: 0px;
    left: -25px;
}

.loading i:nth-child(8) {
    top: 17px;
    left: -17px;
}

看到这些代码,如果你不知道为什么这样能够画出一个圆,那么拿出草稿纸,画一个坐标轴,将上述代码中的 top 值作为 y 轴的值,将 left 的值作为 x 轴的值,就可以看到为什么这么书写代码了。好了,静态图像已经书写完毕,那么接下来就是定义动画的时间了

  @-webkit-keyframes loading {
        50%{
            transform: scale(0.4);
            opacity: 0.3;
        }
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

opacity 属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i 标签指定动画效果,从上到下依次为

 -webkit-animation: loading 1s ease 0s infinite;
 -webkit-animation: loading 1s ease 0.12s infinite;
 -webkit-animation: loading 1s ease 0.24s infinite;
 -webkit-animation: loading 1s ease 0.36s infinite;
 -webkit-animation: loading 1s ease 0.48s infinite;
 -webkit-animation: loading 1s ease 0.60s infinite;
 -webkit-animation: loading 1s ease 0.72s infinite;
 -webkit-animation: loading 1s ease 0.84s infinite;

这个时候如果运行,你会发现好像是逆时针旋转的,如果想改成顺时针旋转,可以将延迟时间前面都加上负号。好了,今天先介绍这三种加载效果,如果书写有错误,欢迎反馈交流。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱(2)-css视频教程

以上就是分享CSS3中3个Loading 设计的实例代码(一)的详细内容,更多请关注php中文网其它相关文章!

}

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 关于字体平滑的详细介绍

    2017-07-03

  • 关于文章简介的详细介绍

    2017-07-03

  • 有关定义元素的文章推荐9篇

    2017-07-03

  • 字体图标如何使用?总结字体图标实例用法

    2017-07-03