东方伊甸园报道45fan.com - 东方伊甸园

搜索: 您的位置主页 > 网络频道 > 阅读资讯:使用纯CSS3制作loading功效?

使用纯CSS3制作loading功效?_东方伊甸园官网资讯

搜索: 您的位置主页 > 网络频道 > 阅读资讯:使用纯CSS3制作loading功效?

使用纯CSS3制作loading功效?

2017-10-25 17:24:51 来源:www.45fan.com 【

使用纯CSS3制作loading功效?

一些网站或者app在加载新东西的时候,往往会有一些好看有趣的loading图,大部分的loading样式都可以使用css3写出来,不仅比直接使用gif图简单方便,还能节省加载时间和空间,下面我就把20种常见的loading动效图的代码贴出来,大家一起参考学习。

贴出来的代码比较多,大家可以去我的GItHub下载查看源码

效果图为:

使用纯CSS3制作loading功效?

使用纯CSS3制作loading功效?

使用纯CSS3制作loading功效?

以下为对应的html代码:

<!doctype html>
<head>
<meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="demo.css"/>
  <link rel="stylesheet" type="text/css" href="loaders.css"/>
  <title>css3炫酷页面加载动画特效代码 </title>
</head>
<body>
 <main>
  <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>
 </main>
 <script>
  document.addEventListener('DOMContentLoaded', function () {
   document.querySelector('main').className += 'loaded';
  });
 </script>


</body>
</html>

css3代码有点长,都写在一块了,就不贴出来了,详情去github查看

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。


本文地址:/a/question/93086.html
Tags: 制作 详解 css3
编辑:东方伊甸园
条评论