投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / Html5 CSS3 / 蓝色扁平化css3 loading加载动画特效
蓝色扁平化css3 loading加载动画特效
标签:

插件介绍

    这是一款css3属性制作loading加载动画,实用的加载图标动画特效。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-21
    阅读:

蓝色扁平化css3 loading加载动画特效

简要教程

这是一款css3属性制作loading加载动画,实用的加载图标动画特效。
使用方法

在页面引入以下HTML结构文件

<section>
  <div class='sk-rotating-plane'></div>
</section>
<!-- / 2 -->
<section>
  <div class='sk-double-bounce'>
    <div class='sk-child sk-double-bounce-1'></div>
    <div class='sk-child sk-double-bounce-2'></div>
  </div>
</section>
<!-- / 3 -->
<section>
  <div class='sk-wave'>
    <div class='sk-rect sk-rect-1'></div>
    <div class='sk-rect sk-rect-2'></div>
    <div class='sk-rect sk-rect-3'></div>
    <div class='sk-rect sk-rect-4'></div>
    <div class='sk-rect sk-rect-5'></div>
  </div>
</section>
<!-- / 4 -->
<section>
  <div class='sk-wandering-cubes'>
    <div class='sk-cube sk-cube-1'></div>
    <div class='sk-cube sk-cube-2'></div>
  </div>
</section>
<!-- / 5 -->
<section>
  <div class='sk-spinner sk-spinner-pulse'></div>
</section>
<!-- / 6 -->
<section>
  <div class='sk-chasing-dots'>
    <div class='sk-child sk-dot-1'></div>
    <div class='sk-child sk-dot-2'></div>
  </div>
</section>
<!-- / 7 -->
<section>
  <div class='sk-three-bounce'>
    <div class='sk-bounce-1 sk-child'></div>
    <div class='sk-bounce-2 sk-child'></div>
    <div class='sk-bounce-3 sk-child'></div>
  </div>
</section>
<!-- / 8 -->
<section>
  <div class='sk-circle-bounce'>
    <div class='sk-child sk-circle-1'></div>
    <div class='sk-child sk-circle-2'></div>
    <div class='sk-child sk-circle-3'></div>
    <div class='sk-child sk-circle-4'></div>
    <div class='sk-child sk-circle-5'></div>
    <div class='sk-child sk-circle-6'></div>
    <div class='sk-child sk-circle-7'></div>
    <div class='sk-child sk-circle-8'></div>
    <div class='sk-child sk-circle-9'></div>
    <div class='sk-child sk-circle-10'></div>
    <div class='sk-child sk-circle-11'></div>
    <div class='sk-child sk-circle-12'></div>
  </div>
</section>
<!-- / 9 -->
<section>
  <div class='sk-cube-grid'>
    <div class='sk-cube sk-cube-1'></div>
    <div class='sk-cube sk-cube-2'></div>
    <div class='sk-cube sk-cube-3'></div>
    <div class='sk-cube sk-cube-4'></div>
    <div class='sk-cube sk-cube-5'></div>
    <div class='sk-cube sk-cube-6'></div>
    <div class='sk-cube sk-cube-7'></div>
    <div class='sk-cube sk-cube-8'></div>
    <div class='sk-cube sk-cube-9'></div>
  </div>
</section>
<!-- / 10 -->
<section>
  <div class='sk-fading-circle'>
    <div class='sk-circle sk-circle-1'></div>
    <div class='sk-circle sk-circle-2'></div>
    <div class='sk-circle sk-circle-3'></div>
    <div class='sk-circle sk-circle-4'></div>
    <div class='sk-circle sk-circle-5'></div>
    <div class='sk-circle sk-circle-6'></div>
    <div class='sk-circle sk-circle-7'></div>
    <div class='sk-circle sk-circle-8'></div>
    <div class='sk-circle sk-circle-9'></div>
    <div class='sk-circle sk-circle-10'></div>
    <div class='sk-circle sk-circle-11'></div>
    <div class='sk-circle sk-circle-12'></div>
  </div>
</section>
<!-- / 11 -->
<section>
  <div class='sk-folding-cube'>
    <div class='sk-cube sk-cube-1'></div>
    <div class='sk-cube sk-cube-2'></div>
    <div class='sk-cube sk-cube-4'></div>
    <div class='sk-cube sk-cube-3'></div>
  </div>
</section>
<section></section>