你的位置:首页 > 网页设计

[网页设计]基于css3炫酷页面加载动画特效代码


基于CSS3实现35个动画SVG图标。这是一款基于jQuery+CSS3实现的SVG图标动画代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <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>

via:http://www.w2bc.com/Article/33625