一些網站或者app在加載新東西的時候，往往會有一些好看有趣的loading圖，大部分的loading樣式都可以使用css3寫出來，不僅比直接使用gif圖簡單方便，還能節省加載時間和空間，下面我就把20種常見的loading動效圖的代碼貼出來，大家一起參考學習。
貼出來的代碼比較多，大家可以去我的GItHub下載查看源碼
效果圖為：
以下為對應的html代碼：
<!doctype html><head><meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="demo.css"/> <link rel="stylesheet" type="text/css" href="loaders.css"/> <title>css3炫酷頁面加載動畫特效代碼 </title></head><body> <main> <div class="loaders"> <div class="loader"> <div class="loader-inner ball-pulse"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-grid-pulse"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-clip-rotate"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-clip-rotate-pulse"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner square-spin"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-clip-rotate-multiple"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-pulse-rise"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-rotate"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner cube-transition"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-zig-zag"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-zig-zag-deflect"> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-triangle-path"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale-party"> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale-multiple"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-pulse-sync"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-beat"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale-pulse-out"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-scale-pulse-out-rapid"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale-ripple"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-scale-ripple-multiple"> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-spin-fade-loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner line-spin-fade-loader"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner triangle-skew-spin"> <div></div> </div> </div> <div class="loader"> <div class="loader-inner pacman"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner ball-grid-beat"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="loader"> <div class="loader-inner semi-circle-spin"> <div></div> </div> </div> </div> </main> <script> document.addEventListener('DOMContentLoaded', function () { document.querySelector('main').className += 'loaded'; }); </script></body></html>css3代碼有點長，都寫在一塊了，就不貼出來了，詳情去github查看
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
