如何用CSS3製作頁面圓圈載入動畫（附程式碼）

開啟頁面時，經常會遇到頁面正在載入的情況，身為前端工程師，你知道如何用CSS3實作頁面載入動畫效果嗎？這篇文章就和大家分享一個酷炫的圓圈載入動畫效果的程式碼，有一定的參考價值，有興趣的朋友可以看看。

製作頁面載入動畫需要用到很多CSS3中的屬性，例如：animation屬性，position定位，border-radius圓角，transform屬性等等，如有不清楚的同學可以看看我以前的文章，之前都有介紹過，或是訪問CSS3影片教學，這些都是基礎，一定要掌握。

實例：製作一個圓圈載入動畫效果，圓圈在載入時大小由小變大，顏色由淺變深，具體程式碼如下：

HTML部分：

<div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>     
      </div>
  </div>

CSS部分：

.loader{
       width: 300px;
       border: 1px solid #ccc;
       height: 200px;
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
   }   
   @-webkit-keyframes loading{
       50%{
           transform: scale(0.4);
           opacity: 0.3;
       }
       100%{
           transform: scale(1);
           opacity: 1;
       }
   }
   .loading{
       position: relative;
   }
   .loading i{
       display: block;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       position: absolute;
       background: #333;
   }
   .loading i:nth-child(1){
       top: 25px;
       left: 0;
       -webkit-animation: loading 1s ease 0s infinite;
   }
   .loading i:nth-child(2){
       top: 17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.12s infinite;
   }
   .loading i:nth-child(3){
       top: 0;
       left: 25px;
       -webkit-animation: loading 1s ease 0.24s infinite;
   }
   .loading i:nth-child(4){
       top: -17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.36s infinite;
   }
   .loading i:nth-child(5){
       top: -25px;
       left: 0;
       -webkit-animation: loading 1s ease 0.48s infinite;
   }
   .loading i:nth-child(6){
       top: -17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.6s infinite;
   }
   .loading i:nth-child(7){
       top: 0;
       left: -25px;
       -webkit-animation: loading 1s ease 0.72s infinite;
   }
   .loading i:nth-child(8){
       top: 17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.84s infinite;   
   }

效果圖：

#以上分享了CSS3實作頁面載入動畫效果的程式碼，專案中用的比較多，可以直接拿過去使用，也希望大家可以自己動手嘗試，看看自己能不能寫出其他的效果，希望這篇文章對你有幫助！更多相關教學請造訪 CSS影片教學

#

以上是如何用CSS3製作頁面圓圈載入動畫（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！