大家在瀏覽頁面時有沒有遇到頁面正在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); } }
效果如圖所示:
#以上介紹了CSS3實作頁面loading載入動畫效果的方法,專案中用的比較多,可以直接拿過去使用,也可以修改成自己喜歡的樣式,希望這篇文章對你有幫助!
【相關教學推薦】
1. HTML影片教學
#2. CSS3線上手冊
#3. bootstrap教程
以上是HTML+CSS實作頁面載入(loading)動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!