首页
所有分类
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实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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
SpringBoot(22) pyqt5(3) JSON(10) css3 (2) MapReduce(1) pycharm(6) Qlabel(1) MybatisPlus(2) linux(15) Normal From(1)
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
React中Ref 的使用方法详解
2020/04/28 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python3 求约数的实例
2019/12/05 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python @property装饰器原理解析
2020/01/22 Python
python正则表达式实例代码
2020/03/03 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
预备党员党校学习自我评价分享
2013/11/12 职场文书
家长建议怎么写
2014/05/15 职场文书
文明城市标语
2014/06/16 职场文书
死亡赔偿协议书
2015/01/28 职场文书
红白喜事主持词
2015/07/06 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
如何书写民事调解协议书？
2019/06/25 职场文书