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