首頁  >  文章  >  web前端  >  HTML+CSS實作頁面載入(loading)動畫效果

HTML+CSS實作頁面載入(loading)動畫效果

yulia
yulia原創
2018-10-16 17:15:089825瀏覽

大家在瀏覽頁面時有沒有遇到頁面正在loading(載入)的情況,那身為一個前端開發人員,你知道如何用CSS3和HTML製作頁面載入動畫效果嗎?這篇文章就跟大家分享一個超簡單實用的CSS3 圓圈載入(loading)動畫效果的程式碼,有一定的參考價值,有興趣的朋友可以看看。

想要實作loading載入動畫需要用到很多CSS3中的屬性和HTML標籤,例如:animation動畫,display,border-radius圓角,transform屬性等等,如有不清楚的小夥伴可以看看我以前的文章,之前都有介紹過,或是訪問CSS3影片教學

實例示範:用三個圓圈製作一個頁面載入動畫效果,圓圈由隱藏變成出現再變成隱藏,具體程式碼如下:

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)動畫效果


#以上介紹了CSS3實作頁面loading載入動畫效果的方法,專案中用的比較多,可以直接拿過去使用,也可以修改成自己喜歡的樣式,希望這篇文章對你有幫助!

【相關教學推薦】

1. HTML影片教學
#2. CSS3線上手冊
#3. bootstrap教程

以上是HTML+CSS實作頁面載入(loading)動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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