純CSS3實作頁面圓圈載入（loading）動畫特效
在網速不好的情況下打開網站或觀看視頻，頁面加載會很慢，這時一般會提示用戶“頁面正在加載中，請稍後”，而且會有一個圓圈一直在轉動。正在學習html和CSS的小夥伴，你會用CSS3實現圓圈載入動畫效果嗎？這篇文章就跟大家分享一個純CSS3實現的圓圈（loading）加載動畫特效，有興趣的小夥伴可以參考借鑒一下。
用CSS3製作圓圈loading效果需要用到很多CSS3中的屬性，例如：animation動畫，keyframes，border-radius圓角等等，如果有不清楚這些屬性的小夥伴可以參考PHP中文網的相關文章，或訪問CSS3影片教學 。
接下來要給大家詳細介紹，如何用HTML和CSS製作頁面圓圈載入（loading）動畫
HTML部分：
在頁面中建立一個div，用於放置圓圈載入動畫，並給div一個class類別名，方便對其設定CSS樣式，具體程式碼如下：
<body> <h3 id="CSS圆圈加载样式">CSS圆圈加载样式</h3> <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）載入動畫的特效，步驟解說比較詳細，之前不會的小夥伴一定要自己動手嘗試，看看你的程式碼能不能實現頁面載入的效果，希望這篇文章對你有幫助！
更多酷炫CSS3、html5、javascript特效程式碼，盡在：js特效大全
更多相關教學請造訪CSS3最新版參考手冊
以上是純CSS3實作頁面圓圈載入（loading）動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
css怎麼隱藏元素但不佔空間
Jun 01, 2022 pm 07:15 PM
兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
css3如何實現滑鼠點擊圖片放大
Apr 25, 2022 pm 04:52 PM
實作方法：1、使用「:active」選擇器選取滑鼠點擊圖片的狀態；2、使用transform屬性和scale()函數實現圖片放大效果，語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。
原來利用純CSS也能實現文字輪播與圖片輪播！
Jun 10, 2022 pm 01:00 PM
怎麼製作文字輪播與圖片輪播？大家第一想到的是利用js，其實利用純CSS也能實現文字輪播與圖片輪播，下面來看看實作方法，希望對大家有幫助！
css3怎麼設定動畫旋轉速度
Apr 28, 2022 pm 04:32 PM
在css3中，可以利用「animation-timing-function」屬性來設定動畫旋轉速度，該屬性用於指定動畫將如何完成一個週期，設定動畫的速度曲線，語法為「元素{animation-timing-function:速度屬性值;}」。
Vue中如何實現全域loading效果
Jun 11, 2023 am 09:05 AM
在前端開發中，我們經常會有一個場景：使用者在與網頁互動過程中需要等待資料的加載，此時通常會有一個loading效果顯示，提醒使用者等待。在Vue框架中，實作一個全域loading效果並不困難，以下我們來介紹如何實作。第一步：建立Vue插件我們可以建立一個名為loading的Vue插件，可以在所有的Vue實例中引用。在外掛程式中，我們需要實作以下兩個方法：s
