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

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

HTML / CSS 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 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
You might like
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
viewer.js实现图片预览功能
2020/06/24 Javascript
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python 实现按对象传值
2019/12/26 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
super关键字的用法
2012/04/10 面试题
优秀体育委员自荐书
2014/01/31 职场文书
实习科室评语
2015/01/04 职场文书
家装电话营销开场白
2015/05/29 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python