最近本人正在極客學(xué)院學(xué)習(xí) HTML5 系列課程，這么課程涵蓋的內(nèi)容也是非常的多，雖然內(nèi)容十分簡(jiǎn)單容易理解，但是非常難以記憶，比如 CSS3 的一些屬性。今天所要介紹的 CSS3 Loading 動(dòng)畫(huà)也是極客學(xué)院里所介紹的內(nèi)容，感興趣的同學(xué)也可以前去觀看視屏。

Loading one

demo01.gif

第一種加載動(dòng)畫(huà)的效果，就是這么一個(gè)圖在不停的轉(zhuǎn)啊轉(zhuǎn)，下面我們就來(lái)看看代碼。

首先，我們先定義一下 HTML代碼，為了方便這里我只粘貼核心代碼

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

div下面我們使用了 i標(biāo)簽，不要問(wèn)為什么，你也可以換成 p標(biāo)簽或其他任何標(biāo)簽。下面就用 CSS對(duì)我們的Html進(jìn)行修飾

* {
    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; 這一行，將上下外邊距設(shè)置為 50px, 左右設(shè)置為 auto，這樣可以達(dá)到將我們的元素水平居中的目的。

還有這里的 box-sizing: border-box 是什么意思呢？我們將寬度設(shè)置為了父元素的 30%,而我們又設(shè)置了邊框，那這個(gè)邊框占據(jù)的大小算不算在當(dāng)前元素的寬度中呢？這里我們?cè)O(shè)置的值就是說(shuō)明，加上邊框占據(jù)的大小，當(dāng)前元素占父元素的 30%。

display,align-items,justify-content 這三個(gè)屬性是為了將 i 標(biāo)簽中的內(nèi)容放置在 div 的中部。首先利用 display 屬性將div 設(shè)置成彈性盒子元素，然后利用 align-items 設(shè)置元素在縱軸上居中，justify-content 設(shè)置元素在橫軸上居中。注意居中效果必須在這三種元素同時(shí)存在時(shí)才有效，因?yàn)楹髢蓚€(gè)屬性是依賴(lài)于第一個(gè)屬性的。

 .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 屬性，其中設(shè)置了線(xiàn)性漸變效果，其中的參數(shù)也是我剛接觸不能夠理解的，不明白為什么要這么寫(xiě)，其實(shí)可以這么理解，從0% 到 70% 設(shè)置成透明，從 70% 到 100% 設(shè)置成 #699，這樣我們就看到了上述圖片中圖像。

-webkit-animation 屬性就是為當(dāng)前元素指定了一個(gè)動(dòng)畫(huà)，第一個(gè)參數(shù)是動(dòng)畫(huà)的名稱(chēng)，也即 loading ，該動(dòng)畫(huà)是需要我們自己去定義的，具體定義下面再介紹。第二個(gè)參數(shù)是動(dòng)畫(huà)持續(xù)的時(shí)長(zhǎng)，第三個(gè)參數(shù)是動(dòng)畫(huà)的速度曲線(xiàn)，第四個(gè)參數(shù)是動(dòng)畫(huà)延遲時(shí)間，第五個(gè)參數(shù)是動(dòng)畫(huà)播放的次數(shù)。下面看看我們自己定義的動(dòng)畫(huà)

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

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

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

引用的時(shí)候 -moz-animation: loading-moz 1s linear 0s infinite;幾乎是相同的，只不過(guò)換個(gè)頭部而已（至于在其他瀏覽器中怎么定義，自己去試試吧）。

Loading two

demo02.gif

這個(gè)動(dòng)畫(huà)的效果就是五個(gè)條紋像波浪一樣擺動(dòng)。下面就來(lái)書(shū)寫(xiě)這么一個(gè)效果。首先是HTML,毫無(wú)懸念，十分簡(jiǎn)單的布局

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

其實(shí)這個(gè)效果幾乎所有的CSS 代碼都是和上面一致的，來(lái)看看

* {
    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;
}

這里唯一多出來(lái)的一行代碼就是 .loader i 中的 margin-right屬性，為什么會(huì)多這么一行呢？因?yàn)槲覀冇?5 個(gè) i 標(biāo)簽，如果沒(méi)有這行屬性設(shè)定，那么所有的標(biāo)簽就回重疊在一起了。接下來(lái)就是動(dòng)畫(huà)效果的設(shè)定了.

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

可見(jiàn)我們?cè)O(shè)置的動(dòng)畫(huà)效果就是在 50% 的時(shí)候，將元素沿著 Y 軸進(jìn)行縮放。然后我們對(duì)每一個(gè)i 標(biāo)簽進(jìn)行了動(dòng)畫(huà)設(shè)定，不同的是每一個(gè)標(biāo)簽中的動(dòng)畫(huà)延遲執(zhí)行時(shí)間不同，這樣就可以達(dá)到波浪的效果，還有一點(diǎn)值得注意的是，我們發(fā)現(xiàn)我們指定的 動(dòng)畫(huà)速度曲線(xiàn)不同了，其實(shí)這個(gè)地方我們有必要了解一下所有可能的取值，如下

linear  動(dòng)畫(huà)從頭到尾的速度是相同的。
ease    默認(rèn)。動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。 
ease-in 動(dòng)畫(huà)以低速開(kāi)始。    
ease-out    動(dòng)畫(huà)以低速結(jié)束。
ease-in-out 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。

Loading Three

demo03.gif

這次要做的效果是動(dòng)態(tài)轉(zhuǎn)圈加載的效果，下面來(lái)看看如何實(shí)現(xiàn)這里的 HTML 代碼和以上兩個(gè)可能有點(diǎn)差別，這里多了一個(gè) div 標(biāo)簽，目的是讓畫(huà)出的圖形能夠居中。

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

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

要理解為什么這些代碼會(huì)畫(huà)出如圖所示的圖形，那么我們必須要對(duì) position 屬性有一個(gè)透徹的了解，首先我們來(lái)看看我們用到的兩個(gè)屬性值是什么意思.

absolute    
  生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
  元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

relative    
  生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
  因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。

知道了意思，再來(lái)分析以上的代碼，我們?cè)?code>loading 元素中定義了一個(gè) position:relative 由于沒(méi)有相應(yīng)的內(nèi)容將其撐起，所以這個(gè)時(shí)候loading 實(shí)際上為中心的一個(gè)點(diǎn)，然后我們將 i 標(biāo)簽設(shè)置為絕對(duì)定位，也就是圍繞著這個(gè)點(diǎn)進(jìn)行畫(huà)圓即可。下面來(lái)看看畫(huà)圓的代碼

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

看到這些代碼，如果你不知道為什么這樣能夠畫(huà)出一個(gè)圓，那么拿出草稿紙，畫(huà)一個(gè)坐標(biāo)軸，將上述代碼中的 top 值作為 y 軸的值，將 left 的值作為 x 軸的值，就可以看到為什么這么書(shū)寫(xiě)代碼了。好了，靜態(tài)圖像已經(jīng)書(shū)寫(xiě)完畢，那么接下來(lái)就是定義動(dòng)畫(huà)的時(shí)間了

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

opacity 屬性用于設(shè)置元素的透明度。所以說(shuō)我們的動(dòng)畫(huà)效果就是將元素縮小為 0.4 倍并且將透明度設(shè)置成 0.3。然后為每個(gè) i 標(biāo)簽指定動(dòng)畫(huà)效果，從上到下依次為

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

這個(gè)時(shí)候如果運(yùn)行，你會(huì)發(fā)現(xiàn)好像是逆時(shí)針旋轉(zhuǎn)的，如果想改成順時(shí)針旋轉(zhuǎn)，可以將延遲時(shí)間前面都加上負(fù)號(hào)。好了，今天先介紹這三種加載效果，如果書(shū)寫(xiě)有錯(cuò)誤，歡迎反饋交流。