溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用CSS3制作圓圈loading效果需要用到很多CSS3中的屬性，比如：animation動畫，keyframes，border-radius圓角等等。
接下來給大家詳細介紹，如何用HTML和CSS制作頁面圓圈加載（loading）動畫
HTML部分：
在頁面中創建一個div，用于放置圓圈加載動畫，并給div一個class類名，便于對其設置CSS樣式，具體代碼如下：
<body> <h4>CSS圓圈加載樣式</h4> <div class="loading"></div> </body>
CSS部分：
首先設置div的長和高為120px，然后將border-radius:設為50%，使其變為圓形，用border: 16px solid #f3f3f3設置圓圈的寬度和顏色，最后通過 border-top屬性，設置一個可以滾動的部分。基本樣式完成以后，就是用CSS3中的animation動畫，讓其無限循環轉動，具體代碼如下：
.loading {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
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);
}
}注： -webkit- 和 -ms- 前綴用于那些不支持 animation 和 transform 屬性的瀏覽器，為了確保瀏覽器的兼容性，需要加上。
效果圖：
以上就是純CSS3實現頁面圓圈加載（loading）動畫特效的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
