你的位置:首页 > 软件开发 > 网页设计 > 纯CSS3制作超级漂亮又实用的加载小图标

纯CSS3制作超级漂亮又实用的加载小图标

发布时间:2016-10-13 16:00:08
先来一张各种效果的预览图,其实代码并不复杂,关键看自己如何运用。<!doctype html><head><meta charset="utf-8"> <link rel="stylesheet" ...

先来一张各种效果的预览图,其实代码并不复杂,关键看自己如何运用。

纯CSS3制作超级漂亮又实用的加载小图标

<!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制作超级漂亮又实用的加载小图标

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。