用html和CSS實(shí)現(xiàn)頁面加載loading動畫效果的方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

高明網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

實(shí)現(xiàn)頁面加載loading動畫效果需要用到很多CSS中的屬性，比如：animation動畫，keyframes，border-radius圓角，border屬性等等，如果有小伙伴不知道這些屬性的，可以參考創(chuàng)新互聯(lián)的相關(guān)手冊：CSS手冊 ，希望對你有所幫助。

以下是如何用HTML和CSS3實(shí)現(xiàn)頁面加載（loading）動畫效果實(shí)例詳解：

HTML部分

創(chuàng)建一個div用于顯示加載動畫，并給div一個class類名，便于對其進(jìn)行樣式設(shè)置，（如果樣式不多也可以在標(biāo)簽內(nèi)設(shè)置樣式）具體代碼如下：

  
CSS加載樣式
  

 

CSS部分

頁面的基本框架已經(jīng)有了，現(xiàn)在還需要用CSS對其進(jìn)行樣式設(shè)置，設(shè)置div的長和高為120px，設(shè)置border-radius屬性值為50%，將其變?yōu)閳A形，用 border-top和border-bottom設(shè)置上下兩個弧形，便于后面的動畫設(shè)置。

最后，為了使其旋轉(zhuǎn)起來，需要用animation和@keyframes屬性，具體代碼如下：

注意：使用animation和@keyframes動畫時，注意瀏覽器的兼容性。（比如加前綴 -webkit- 和 -ms- ）

.load {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
   }  
   @-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
    }
   
   @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }

loading效果效果圖：

感謝各位的閱讀！看完上述內(nèi)容，你們對用html和CSS實(shí)現(xiàn)頁面加載loading動畫效果的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。