首頁 > 文章 > web前端 > 純CSS3實作頁面圓圈載入（loading）動畫特效

純CSS3實作頁面圓圈載入（loading）動畫特效

yulia原創: 2018-10-27 16:48:2211210瀏覽

在網速不好的情況下打開網站或觀看視頻，頁面加載會很慢，這時一般會提示用戶“頁面正在加載中，請稍後”，而且會有一個圓圈一直在轉動。正在學習html和CSS的小夥伴，你會用CSS3實現圓圈載入動畫效果嗎？這篇文章就跟大家分享一個純CSS3實現的圓圈（loading）加載動畫特效，有興趣的小夥伴可以參考借鑒一下。

用CSS3製作圓圈loading效果需要用到很多CSS3中的屬性，例如：animation動畫，keyframes，border-radius圓角等等，如果有不清楚這些屬性的小夥伴可以參考PHP中文網的相關文章，或訪問CSS3影片教學。

接下來要給大家詳細介紹，如何用HTML和CSS製作頁面圓圈載入（loading）動畫

HTML部分：

在頁面中建立一個div，用於放置圓圈載入動畫，並給div一個class類別名，方便對其設定CSS樣式，具體程式碼如下：

<body>
  <h3>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實作圓圈（loading）載入動畫的特效，步驟解說比較詳細，之前不會的小夥伴一定要自己動手嘗試，看看你的程式碼能不能實現頁面載入的效果，希望這篇文章對你有幫助！

更多酷炫CSS3、html5、javascript特效程式碼，盡在：js特效大全

更多相關教學請造訪CSS3最新版參考手冊

以上是純CSS3實作頁面圓圈載入（loading）動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript html5 css css3 html webkit 循环 class JS border transform animation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在CSS背景圖片中使用svg的用法介紹（附範例）下一篇：在CSS背景圖片中使用svg的用法介紹（附範例）

看更多