這篇文章給大家分享的是CSS3實(shí)現(xiàn)頁(yè)面加載動(dòng)畫的方法，相信大部分人都還沒學(xué)會(huì)這個(gè)技能，為了讓大家學(xué)會(huì)，給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供哈爾濱企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為哈爾濱眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

十七、效果十七

三個(gè)小球，縱向居中，間距撐開，依次改變小球的translateY的值即可。

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

十八、效果十八

三個(gè)小球，橫縱方向上均居中，通過外邊距撐開小球之間的距離，從效果上看是左右兩邊的兩個(gè)小球在圍繞中間小球做環(huán)繞運(yùn)動(dòng)，那么我們可以直接讓小球的父元素來旋轉(zhuǎn)，來達(dá)到兩邊小球的環(huán)繞效果（父元素旋轉(zhuǎn)的時(shí)候，因?yàn)閳A形，所以中間小球看不出是在旋轉(zhuǎn)，并且中間的位置也不會(huì)改變，從視覺上看，中間小球沒有做任何變化）。

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

十九、效果十九

一共五個(gè)小球，每一個(gè)小球執(zhí)行的動(dòng)畫都一樣，只是每個(gè)小球的動(dòng)畫延遲時(shí)間不同，而使小球的位置不同，將五個(gè)小球定位至同一個(gè)位置作為統(tǒng)一起點(diǎn)（這里，我是將五個(gè)小球統(tǒng)一定位至最右邊）

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到達(dá)終點(diǎn)，開始返回起點(diǎn)      }
    }
@keyframes cool_ballS {
      80% {               //到達(dá)終點(diǎn)
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //開始返回起點(diǎn)，長(zhǎng)度變大，寬度變小，模擬移動(dòng)產(chǎn)生的形變
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到達(dá)起點(diǎn)
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢復(fù)初始
        width: 20px;
        height: 20px;
      } 
    }

二十、效果二十

共八個(gè)小球，定位圍成一個(gè)圓，改變小球的寬度、高度即可（要保持小球改變的是以小球的圓心為基準(zhǔn)）

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

（50%-80%小球維持寬度、高度保持0，形成了一半顯示，一半隱藏的效果）

二十一、效果二十一

一共三個(gè)小球，每個(gè)小球的運(yùn)動(dòng)軌跡依然是相同的，這里，我將三個(gè)小球的中心定位到縱向頂部，橫向中心，然后分三個(gè)階段，先運(yùn)動(dòng)到右下角，再到左下角，最后返回起點(diǎn)。

（在每一個(gè)階段接近中間的時(shí)間點(diǎn)，加上了透明度的改變）

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

二十二、效果二十二

這類似于一個(gè)旋轉(zhuǎn)的齒輪，關(guān)鍵是如何做出一個(gè)齒輪的形狀來，一個(gè)p給實(shí)現(xiàn)邊框做里面的圓，給p的偽類虛線邊框做外面的鋸齒，偽類的邊框越寬，鋸齒越稀松，反之，越密集。

做出來齒輪了，就剩下旋轉(zhuǎn)的小case了。

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

看完這篇文章，你們學(xué)會(huì)CSS3實(shí)現(xiàn)頁(yè)面加載動(dòng)畫的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀。