Home >Web Front-end >HTML Tutorial >Based on css3 cool page loading animation special effects code_html/css_WEB-ITnose

Based on css3 cool page loading animation special effects code_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:451663browse

Implement 35 animated SVG icons based on CSS3. This is an SVG icon animation code based on jQuery CSS3. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

 <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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn