CSS3 に基づくクールなページ読み込みアニメーションの特殊効果 code_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:45:45
オリジナル
1612 人が閲覧しました

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート