分享CSS3中3個Loading 設計的實例代碼（一）

最近本人正在學習<a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a> 系列課程，這麼課程涵蓋的內容也是非常的多，雖然內容十分簡單容易理解，但是非常難以記憶，比如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);
    }
}

十分容易理解，就是在動畫的不同階段進行元素的旋轉。值得注意的是，這種定義方式只能在Chrome 和Safari 瀏覽器中能看到動畫效果，那麼如果我們想在火狐瀏覽器中也顯示動畫效果，那我們需要這麼定義。

 @-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中文網其他相關文章！