HTML+CSS實現頁面加載loading動畫效果的方法

這篇文章主要介紹HTML+CSS實現頁面加載loading動畫效果的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

實例示范：用三個圓圈制作一個頁面加載動畫效果，圓圈由隱藏變為出現再變為隱藏，具體代碼如下：

HTML部分：

<div class="spinner">
     <div class="bounce1"></div>
    <div class="bounce2"></div>
     <div class="bounce3"></div>
</div>

CSS3部分：

.spinner {
     margin: 100px auto 0;
     width: 150px;
     text-align: center;
   }
    
   .spinner > div {
     width: 30px;
     height: 30px;
     background-color: #67CF22;
    
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
     animation: bouncedelay 1.4s infinite ease-in-out;
     /* Prevent first frame from flickering when animation starts */
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
    
   .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
   }
    
   .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
    
   @-webkit-keyframes bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0.0) }
     40% { -webkit-transform: scale(1.0) }
   }
    
   @keyframes bouncedelay {
     0%, 80%, 100% {
       transform: scale(0.0);
       -webkit-transform: scale(0.0);
     } 40% {
       transform: scale(1.0);
       -webkit-transform: scale(1.0);
     }
   }

效果如圖所示：

以上是HTML+CSS實現頁面加載loading動畫效果的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！