用html和CSS實現頁面加載loading動畫效果的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

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

以下是如何用HTML和CSS3實現頁面加載（loading）動畫效果實例詳解：

HTML部分

創建一個div用于顯示加載動畫，并給div一個class類名，便于對其進行樣式設置，（如果樣式不多也可以在標簽內設置樣式）具體代碼如下：

  
CSS加載樣式
  

 

CSS部分

頁面的基本框架已經有了，現在還需要用CSS對其進行樣式設置，設置div的長和高為120px，設置border-radius屬性值為50%，將其變為圓形，用 border-top和border-bottom設置上下兩個弧形，便于后面的動畫設置。

最后，為了使其旋轉起來，需要用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效果效果圖：

感謝各位的閱讀！看完上述內容，你們對用html和CSS實現頁面加載loading動畫效果的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創新互聯網站制作公司行業資訊頻道。