您的位置：首页 > Web前端 > > 正文

css3loading教程（详解纯CSS3制作的20种loading动效）

更多时间：2022-01-23 02:02:05 类别：Web前端浏览量：1776

css3loading教程

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

一些网站或者app在加载新东西的时候，往往会有一些好看有趣的loading图，大部分的loading样式都可以使用css3写出来，不仅比直接使�.jpg" alt="css3loading教程（详解纯CSS3制作的20种loading动效）" border="0" />

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

效果图为：

css3loading教程（详解纯CSS3制作的20种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>
    <li class="loaders">
      <li class="loader">
        <li class="loader-inner ball-pulse">
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-grid-pulse">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-clip-rotate">
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-clip-rotate-pulse">
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner square-spin">
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-clip-rotate-multiple">
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-pulse-rise">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-rotate">
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner cube-transition">
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-zig-zag">
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-zig-zag-deflect">
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-triangle-path">
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-scale">
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner line-scale">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner line-scale-party">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-scale-multiple">
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-pulse-sync">
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-beat">
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner line-scale-pulse-out">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner line-scale-pulse-out-rapid">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-scale-ripple">
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-scale-ripple-multiple">
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-spin-fade-loader">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner line-spin-fade-loader">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner triangle-skew-spin">
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner pacman">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner ball-grid-beat">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </li>
      </li>
      <li class="loader">
        <li class="loader-inner semi-circle-spin">
          <li></li>
        </li>
      </li>
    </li>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('main').className += 'loaded';
    });
  </script>


</body>
</html>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

标签：loading CSS3

上一篇：dedecms怎样查看网页源文件（dedecms批量更新静态时提示：没有该栏目数据可能缓存的解决方法）

下一篇：sql两列内容合并（分组字符合并SQL语句按某字段合并字符串之一简单合并）

您可能感兴趣

css3loading教程（详解纯CSS3制作的20种loading动效）

css3loading教程

热门推荐

排行榜