首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onJuly 05, 2017

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

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

效果图为：

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

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

详解纯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>
    <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查看

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

司马启奏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
css3模拟jq点击事件的实例代码
Jul 06 #HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 #HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 #HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 #HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 #HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 #HTML / CSS
CSS3弹性布局内容对齐（justify-content）属性使用详解
Jul 31 #HTML / CSS
绿林侠盗(1) 吸血鬼(1) 大话西游(1) LOL(1) 战锤40K(1) 遗弃(1) 模拟人生(1) 铁拳(1) 原神(1) 死亡搁浅(1)
You might like
php继承的一个应用
2011/09/06 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
深入了解js原型模式
2019/05/30 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
Python中实现常量（Const）功能
2015/01/28 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
人机交互程序 python实现人机对话
2017/11/14 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
详解python3中的真值测试
2018/08/13 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
了解一下python内建模块collections
2020/09/07 Python
python中实现词云图的示例
2020/12/19 Python
德国购买健身器材：AsVIVA
2017/08/09 全球购物
如何反序的迭代一个序列？how do I iterate over a sequence in reverse order
2012/02/04 面试题
创业资金计划书
2014/02/06 职场文书
医院党员公开承诺书
2014/08/30 职场文书
新店开业策划方案怎么书写？
2019/07/05 职场文书
Nginx配置使用详解
2022/07/07 Servers
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript