寫在前面

今天其實(shí)還是有點(diǎn)期待6月份城市賽道的成績(jī)公布，但是可能因?yàn)槌霈F(xiàn)城市太多等問題，官方也還在快馬加鞭的統(tǒng)計(jì)中，我也趁機(jī)再發(fā)一篇前端的文章了，其實(shí)在很多系統(tǒng)里面我們都看到過各種各樣的加載中樣式，但是總有些顯得平平無奇，今天我就統(tǒng)計(jì)了28種load加載動(dòng)畫特效給大家，希望能滿足大家的需求。

涉及知識(shí)點(diǎn)

CSS3實(shí)現(xiàn)多種load加載效果，純CSS3實(shí)現(xiàn)多種加載中效果，純CSS3實(shí)現(xiàn)28種加載動(dòng)態(tài)效果，頁面實(shí)現(xiàn)loading效果，好看的loading動(dòng)態(tài)特效，animation與transform的靈活應(yīng)用。
版權(quán)聲明：此文原創(chuàng)于CSDN博主-《拄杖盲學(xué)輕聲碼》，主頁有很多分享的代碼，期待您的訪問。

效果展示

其實(shí)這個(gè)就是為了讓更多的人能夠選擇性是否繼續(xù)閱讀這篇文章，為大家精準(zhǔn)定位自己想要的demo，文尾有完整代碼包下載鏈接。

1、Loading節(jié)點(diǎn)的創(chuàng)建

在制作這個(gè)頁面的時(shí)候首先就是構(gòu)思，正常demo都是拿一個(gè)dom節(jié)點(diǎn)來示例，我選擇整4個(gè)為代表，這樣的話看著舒服點(diǎn)。
首先創(chuàng)建四個(gè)div，針對(duì)div設(shè)置居中展示，其中dom節(jié)點(diǎn)如下：

<div class="loader">
  <div class="loader-inner">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="loader">
  <div class="loader-inner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="loader">
  <div class="loader-inner">
    <div></div>
  </div>
</div>
<div class="loader">
  <div class="loader-inner">
    <div></div>
    <div></div>
  </div>
</div>

每一個(gè)loader都是表示裝的一個(gè)加載中的效果，設(shè)置一個(gè)背景色效果如下：

然后再在白色的方塊內(nèi)設(shè)置樣式，因?yàn)樾Ч煌?，所以我采用不同的class名來設(shè)置不同的樣式屬性。
版權(quán)聲明：此文原創(chuàng)于CSDN博主-《拄杖盲學(xué)輕聲碼》，主頁有很多分享的代碼，期待您的訪問。

2、部分效果的實(shí)現(xiàn)源碼

1）三點(diǎn)加載動(dòng)畫

主要使用了animation屬性的設(shè)置，也是CSS3中具有代表性的動(dòng)畫特征，它可以實(shí)現(xiàn)動(dòng)畫的時(shí)間、反向、次數(shù)，甚至支持反向動(dòng)畫等。

語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

其中屬性說明如下：

在我這個(gè)實(shí)例當(dāng)中我主要設(shè)置的代碼如下：

Html代碼

<div class="loader">
  <div class="loader-inner ball-pulse">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS樣式代碼

.ball-pulse>div:nth-child(1) {
        -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(2) {
        -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div:nth-child(3) {
        -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.ball-pulse>div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
}

添加樣式后的效果如下：

2）圓點(diǎn)矩陣加載特效

其實(shí)這個(gè)和上面的有點(diǎn)像，如果說第一個(gè)是一維的，那它就算二維的，是用了9個(gè)圓點(diǎn)形成的一個(gè)正方形矩陣，然后通過不同時(shí)間段各個(gè)圓點(diǎn)大小的變化形成的一種動(dòng)態(tài)加載效果。
Html設(shè)置了9個(gè)子元素div，樣式方面主要使用了css的animation-duration來設(shè)置不同節(jié)點(diǎn)的動(dòng)畫完成時(shí)間、animation-delay設(shè)置延遲間隔及transform設(shè)置縮放。如下所示代碼：

Html代碼

<div class="loader">
  <div class="loader-inner ball-grid-pulse">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS樣式代碼

@keyframes ball-grid-pulse {
        0% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }

        50% {
                -webkit-transform: scale(0.5);
                transform: scale(0.5);
                opacity: 0.7;
        }

        100% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
        }
}

.ball-grid-pulse {
        width: 57px;
}

.ball-grid-pulse>div:nth-child(1) {
        -webkit-animation-delay: -0.06s;
        animation-delay: -0.06s;
        -webkit-animation-duration: 0.72s;
        animation-duration: 0.72s;
}

.ball-grid-pulse>div:nth-child(2) {
        -webkit-animation-delay: 0.25s;
        animation-delay: 0.25s;
        -webkit-animation-duration: 1.02s;
        animation-duration: 1.02s;
}

.ball-grid-pulse>div:nth-child(3) {
        -webkit-animation-delay: -0.17s;
        animation-delay: -0.17s;
        -webkit-animation-duration: 1.28s;
        animation-duration: 1.28s;
}

.ball-grid-pulse>div:nth-child(4) {
        -webkit-animation-delay: 0.48s;
        animation-delay: 0.48s;
        -webkit-animation-duration: 1.42s;
        animation-duration: 1.42s;
}

.ball-grid-pulse>div:nth-child(5) {
        -webkit-animation-delay: 0.31s;
        animation-delay: 0.31s;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
}

.ball-grid-pulse>div:nth-child(6) {
        -webkit-animation-delay: 0.03s;
        animation-delay: 0.03s;
        -webkit-animation-duration: 1.18s;
        animation-duration: 1.18s;
}

.ball-grid-pulse>div:nth-child(7) {
        -webkit-animation-delay: 0.46s;
        animation-delay: 0.46s;
        -webkit-animation-duration: 0.87s;
        animation-duration: 0.87s;
}

.ball-grid-pulse>div:nth-child(8) {
        -webkit-animation-delay: 0.78s;
        animation-delay: 0.78s;
        -webkit-animation-duration: 1.45s;
        animation-duration: 1.45s;
}

.ball-grid-pulse>div:nth-child(9) {
        -webkit-animation-delay: 0.45s;
        animation-delay: 0.45s;
        -webkit-animation-duration: 1.06s;
        animation-duration: 1.06s;
}

.ball-grid-pulse>div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        float: left;
        -webkit-animation-name: ball-grid-pulse;
        animation-name: ball-grid-pulse;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-delay: 0;
        animation-delay: 0;
}

頁面呈現(xiàn)效果如下所示：

3）圓形軌跡加載動(dòng)畫

這個(gè)相比上兩個(gè)沒有那么的復(fù)雜，主要用一個(gè)div就可以完成效果，主要是利用了animation-fill-mode和animation的樣式設(shè)置，針對(duì)動(dòng)畫設(shè)置了transform的角度旋轉(zhuǎn)動(dòng)畫rotate設(shè)置。

Html代碼

 <div class="loader">
        <div class="loader-inner ball-clip-rotate">
          <div></div>
        </div>
      </div>

Css樣式代碼

.ball-clip-rotate>div {
        background-color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        border: 2px solid #fff;
        border-bottom-color: transparent;
        height: 25px;
        width: 25px;
        background: transparent !important;
        display: inline-block;
        -webkit-animation: rotate 0.75s 0s linear infinite;
        animation: rotate 0.75s 0s linear infinite;
}

@keyframes rotate {
        0% {
                -webkit-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1);
        }

        50% {
                -webkit-transform: rotate(180deg) scale(0.6);
                transform: rotate(180deg) scale(0.6);
        }

        100% {
                -webkit-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1);
        }
}

頁面實(shí)現(xiàn)效果如下：

4）柵欄式加載動(dòng)畫

其實(shí)這個(gè)是我們公司現(xiàn)階段用的一個(gè)效果，有點(diǎn)像手風(fēng)琴的感覺，其中設(shè)置了5根小柱子，然后通過設(shè)置這些柱子的高低動(dòng)畫，從而形成一種高低起伏的加載動(dòng)畫。
主要和前面一樣，核心在于animation的樣式設(shè)置。

Html代碼

<div class="loader">
  <div class="loader-inner line-scale">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Css樣式代碼

.line-scale>div:nth-child(1) {
        -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(2) {
        -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(3) {
        -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(4) {
        -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div:nth-child(5) {
        -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
        animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
}

.line-scale>div {
        background-color: #fff;
        width: 4px;
        height: 35px;
        border-radius: 2px;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
}

頁面效果如下所示：

3、完整28種特效獲取方式

• 網(wǎng)盤下載（第四章節(jié)有鏈接路徑，可自行下載）

• 留言獲?。梢栽诓┲鞯脑u(píng)論區(qū)留言，切記要留下郵箱喲，博主看到后第一時(shí)間發(fā)出）

4、源碼下載區(qū)

1）百度網(wǎng)盤

鏈接：https://pan.baidu.com/s/1OSRhPOxonxWDlGxAN_0U1g
提取碼：hdd6

2）123云盤

鏈接：https://www.123pan.com/s/ZxkUVv-V3I4.html
提取碼：hdd6

3）郵箱留言

評(píng)論區(qū)留下您的郵箱賬號(hào)，博主看到第一時(shí)間發(fā)給您，祝您生活愉快！

總結(jié)

以上就是今天要講的內(nèi)容，本文主要介紹了CSS3的特效應(yīng)用，主要實(shí)現(xiàn)了CSS3實(shí)現(xiàn)多種加載中效果，CSS3實(shí)現(xiàn)28種加載動(dòng)態(tài)效果，頁面實(shí)現(xiàn)loading效果，好看的loading動(dòng)態(tài)特效，也期待大家一起進(jìn)步哈，2023年一起加油！?。?mark hidden color="red">文章來源：http://www.zghlxwxcb.cn/news/detail-552538.html

版權(quán)聲明：此文原創(chuàng)于CSDN博主-《拄杖盲學(xué)輕聲碼》，主頁有很多分享的代碼，期待您的訪問。文章來源地址http://www.zghlxwxcb.cn/news/detail-552538.html

到了這里，關(guān)于【CSS加載動(dòng)畫特效】28種純CSS實(shí)現(xiàn)的加載loading動(dòng)態(tài)特效（附源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！