溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用html和CSS實現頁面加載loading動畫效果的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
實現頁面加載loading動畫效果需要用到很多CSS中的屬性，比如：animation動畫，keyframes，border-radius圓角，border屬性等等，如果有小伙伴不知道這些屬性的，可以參考億速云的相關手冊：CSS手冊 ，希望對你有所幫助。
以下是如何用HTML和CSS3實現頁面加載（loading）動畫效果實例詳解：
HTML部分
創建一個div用于顯示加載動畫，并給div一個class類名，便于對其進行樣式設置，（如果樣式不多也可以在標簽內設置樣式）具體代碼如下：
<body> <p style="font-size: 20px;">CSS加載樣式</p> <div class="load"></div> </body>
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動畫效果的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
