今天就跟大家聊聊有關(guān)怎么使用CSS3的頁(yè)面加載動(dòng)畫，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蘇州,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

前兩天從一個(gè)網(wǎng)站中看到了一些比較好的loading動(dòng)畫效果，是用純CSS3來(lái)寫的，感覺不錯(cuò)，就嘗試著照著效果來(lái)自己寫出來(lái)。

在開始之前，先復(fù)習(xí)一個(gè)小知識(shí)：CSS3新增的關(guān)鍵幀動(dòng)畫，可以用來(lái)實(shí)現(xiàn)很多的動(dòng)畫，我們可以通過animation-delay來(lái)控制動(dòng)畫延遲執(zhí)行，來(lái)實(shí)現(xiàn)豐富的效果。

當(dāng)animation-delay的值為正值時(shí)，動(dòng)畫將被延遲從初始狀態(tài)開始執(zhí)行；

當(dāng)animation-delay的值為負(fù)數(shù)時(shí)，動(dòng)畫將被提前從該值（負(fù)數(shù)的絕對(duì)值）對(duì)應(yīng)的狀態(tài)開始執(zhí)行。

（效果圖片可能不太清楚，請(qǐng)諒解）

一共16個(gè)小正方形，將位置定位，通過關(guān)鍵幀來(lái)改變正方形的透明度

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

對(duì)每一個(gè)正方形設(shè)置animation-delay值，在這里我的整體動(dòng)畫耗時(shí)是2s，均分16個(gè)正方形是0.125s，于是我設(shè)置的animation-delay值是從-1.875s開始以0.125的數(shù)差開始增加一直到0。

中間一個(gè)大球的位置不變，旁邊三個(gè)小球分別包含在三個(gè)正方形中，將小球設(shè)置定位{top:0;left:0;}，通過設(shè)置正方形rotateZ旋轉(zhuǎn)便可以形成這種交叉。

通過關(guān)鍵幀動(dòng)畫來(lái)設(shè)置動(dòng)畫過程（下面關(guān)鍵幀動(dòng)畫的書寫并不是最好的方法），并給每個(gè)小球設(shè)置animation-delay的值，可以讓三個(gè)小球在不同的時(shí)刻從正面通過。

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
       width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
       width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
       width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
       width: 20px;
        top: 0;
        left: 0;
      }
    }

另外，還需要給三個(gè)小球的父容器通過關(guān)鍵幀動(dòng)畫設(shè)置z-index值，來(lái)達(dá)到當(dāng)小球是在圍繞大球旋轉(zhuǎn)的視覺效果。

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

這種效果就比較簡(jiǎn)單了，只要改變小球的大小以及透明度就行了（透明度以及小球的寬高在初始時(shí)已定義）。

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
       width: 15px;
      }
    }

初始時(shí)，四個(gè)小球定位到同一個(gè)位置，通過關(guān)鍵幀來(lái)改變小球的left值以及小球的大小即可。

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

看完上述內(nèi)容，你們對(duì)怎么使用CSS3的頁(yè)面加載動(dòng)畫有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：怎么使用CSS3的頁(yè)面加載動(dòng)畫-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://aaarwkj.com/article36/cocdsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、域名注冊(cè)、響應(yīng)式網(wǎng)站、虛擬主機(jī)、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)