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

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

HTML部分

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

 body  p >
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和CSS3實現頁面加載（loading）動畫效果，詳細講解了HTML和CSS部分，比較容易理解，之前沒有接觸過頁面加載動畫的小伙伴一定要自己動手嘗試，看看你的代碼能不能實現頁面加載的效果，希望這篇文章對你有所幫助！
【相關教程推薦】
1. CSS3最新版參考手冊
2. CSS3教程
3. bootstrap教程
以上就是如何用html和CSS實現頁面加載loading動畫效果的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。