原码笔记

原码笔记

详解纯CSS3制作的20种loading动效

小诸哥 0

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

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

效果图为：

以下为对应的html代码：

  1. <!doctype html>
  2. <head>
  3. <meta charset="utf-8">
  4.      <link rel="stylesheet" type="text/css" href="demo.css"/>
  5.      <link rel="stylesheet" type="text/css" href="loaders.css"/>
  6.      <title>css3炫酷页面加载动画特效代码 </title>
  7. </head>
  8. <body>
  9.      <main>
  10.      <div class="loaders">
  11.          <div class="loader">
  12.          <div class="loader-inner ball-pulse">
  13.              <div></div>
  14.              <div></div>
  15.              <div></div>
  16.          </div>
  17.          </div>
  18.          <div class="loader">
  19.          <div class="loader-inner ball-grid-pulse">
  20.              <div></div>
  21.              <div></div>
  22.              <div></div>
  23.              <div></div>
  24.              <div></div>
  25.              <div></div>
  26.              <div></div>
  27.              <div></div>
  28.              <div></div>
  29.          </div>
  30.          </div>
  31.          <div class="loader">
  32.          <div class="loader-inner ball-clip-rotate">
  33.              <div></div>
  34.          </div>
  35.          </div>
  36.          <div class="loader">
  37.          <div class="loader-inner ball-clip-rotate-pulse">
  38.              <div></div>
  39.              <div></div>
  40.          </div>
  41.          </div>
  42.          <div class="loader">
  43.          <div class="loader-inner square-spin">
  44.              <div></div>
  45.          </div>
  46.          </div>
  47.          <div class="loader">
  48.          <div class="loader-inner ball-clip-rotate-multiple">
  49.              <div></div>
  50.              <div></div>
  51.          </div>
  52.          </div>
  53.          <div class="loader">
  54.          <div class="loader-inner ball-pulse-rise">
  55.              <div></div>
  56.              <div></div>
  57.              <div></div>
  58.              <div></div>
  59.              <div></div>
  60.          </div>
  61.          </div>
  62.          <div class="loader">
  63.          <div class="loader-inner ball-rotate">
  64.              <div></div>
  65.          </div>
  66.          </div>
  67.          <div class="loader">
  68.          <div class="loader-inner cube-transition">
  69.              <div></div>
  70.              <div></div>
  71.          </div>
  72.          </div>
  73.          <div class="loader">
  74.          <div class="loader-inner ball-zig-zag">
  75.              <div></div>
  76.              <div></div>
  77.          </div>
  78.          </div>
  79.          <div class="loader">
  80.          <div class="loader-inner ball-zig-zag-deflect">
  81.              <div></div>
  82.              <div></div>
  83.          </div>
  84.          </div>
  85.          <div class="loader">
  86.          <div class="loader-inner ball-triangle-path">
  87.              <div></div>
  88.              <div></div>
  89.              <div></div>
  90.          </div>
  91.          </div>
  92.          <div class="loader">
  93.          <div class="loader-inner ball-scale">
  94.              <div></div>
  95.          </div>
  96.          </div>
  97.          <div class="loader">
  98.          <div class="loader-inner line-scale">
  99.              <div></div>
  100.              <div></div>
  101.              <div></div>
  102.              <div></div>
  103.              <div></div>
  104.          </div>
  105.          </div>
  106.          <div class="loader">
  107.          <div class="loader-inner line-scale-party">
  108.              <div></div>
  109.          <div></div>
  110.              <div></div>
  111.              <div></div>
  112.          </div>
  113.          </div>
  114.          <div class="loader">
  115.          <div class="loader-inner ball-scale-multiple">
  116.              <div></div>
  117.              <div></div>
  118.              <div></div>
  119.          </div>
  120.          </div>
  121.          <div class="loader">
  122.          <div class="loader-inner ball-pulse-sync">
  123.              <div></div>
  124.              <div></div>
  125.              <div></div>
  126.          </div>
  127.          </div>
  128.          <div class="loader">
  129.          <div class="loader-inner ball-beat">
  130.              <div></div>
  131.              <div></div>
  132.              <div></div>
  133.          </div>
  134.          </div>
  135.          <div class="loader">
  136.          <div class="loader-inner line-scale-pulse-out">
  137.              <div></div>
  138.              <div></div>
  139.              <div></div>
  140.              <div></div>
  141.              <div></div>
  142.          </div>
  143.          </div>
  144.          <div class="loader">
  145.          <div class="loader-inner line-scale-pulse-out-rapid">
  146.              <div></div>
  147.              <div></div>
  148.              <div></div>
  149.              <div></div>
  150.              <div></div>
  151.          </div>
  152.          </div>
  153.          <div class="loader">
  154.          <div class="loader-inner ball-scale-ripple">
  155.              <div></div>
  156.          </div>
  157.          </div>
  158.          <div class="loader">
  159.          <div class="loader-inner ball-scale-ripple-multiple">
  160.              <div></div>
  161.              <div></div>
  162.              <div></div>
  163.          </div>
  164.          </div>
  165.          <div class="loader">
  166.          <div class="loader-inner ball-spin-fade-loader">
  167.              <div></div>
  168.              <div></div>
  169.              <div></div>
  170.              <div></div>
  171.              <div></div>
  172.              <div>&lt;/div>
  173.              <div></div>
  174.              <div></div>
  175.          </div>
  176.          </div>
  177.          <div class="loader">
  178.          <div class="loader-inner line-spin-fade-loader">
  179.              <div></div>
  180.              <div></div>
  181.              <div></div>
  182.              <div></div>
  183.              <div></div>
  184.              <div></div>
  185.              <div></div>
  186.              <div></div>
  187.          </div>
  188.          </div>
  189.          <div class="loader">
  190.          <div class="loader-inner triangle-skew-spin">
  191.              <div></div>
  192.          </div>
  193.          </div>
  194.          <div class="loader">
  195.          <div class="loader-inner pacman">
  196.              <div></div>
  197.              <div></div>
  198.              <div></div>
  199.              <div></div>
  200.              <div></div>
  201.          </div>
  202.          </div>
  203.          <div class="loader">
  204.          <div class="loader-inner ball-grid-beat">
  205.              <div></div>
  206.              <div></div>
  207.              <div></div>
  208.              <div></div>
  209.              <div></div>
  210.              <div></div>
  211.              <div></div>
  212.              <div></div>
  213.              <div></div>
  214.          </div>
  215.          </div>
  216.          <div class="loader">
  217.          <div class="loader-inner semi-circle-spin">
  218.              <div></div>
  219.          </div>
  220.          </div>
  221.      </div>
  222.      </main>
  223.      <script>
  224.      document.addEventListener('DOMContentLoaded', function () {
  225.          document.querySelector('main').className += 'loaded';
  226.      });
  227.      </script>
  228.  
  229.  
  230. </body>
  231. </html>

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

标签： loading

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇纯CSS制作自适应分页条附源码下载

下一篇 css简介_动力节点Java学院整理

相关文章