純CSS3實作頁面圓圈載入（loading）動畫特效-css教學-PHP中文網

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

yulia

發布： 2019-11-30 16:36:14

原創

11224 人瀏覽過

在網速不好的情況下打開網站或觀看視頻，頁面加載會很慢，這時一般會提示用戶“頁面正在加載中，請稍後”，而且會有一個圓圈一直在轉動。正在學習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）動畫特效