CSS3轻松实现清新 Loading 效果的简单实例


Posted in HTML / CSS onJune 06, 2016

至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。

第一种效果:

CSS3轻松实现清新 Loading 效果的简单实例

HTML部分

 

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.      <span></span>  
  3.      <span></span>  
  4.      <span></span>  
  5.      <span></span>  
  6.      <span></span>  
  7. </div>  

CSS3部分

CSS Code复制内容到剪贴板
  1. .loading{   
  2.      width80px;   
  3.      height40px;   
  4.      margin: 0 auto;   
  5.      margin-top:100px;   
  6.  }   
  7.  .loading span{   
  8.      displayinline-block;   
  9.      width8px;   
  10.      height: 100%;   
  11.      border-radius: 4px;   
  12.      background: lightgreen;   
  13.      -webkit-animation: load 1s ease infinite;   
  14.  }   
  15.  @-webkit-keyframes load{   
  16.      0%,100%{   
  17.          height40px;   
  18.          background: lightgreen;   
  19.      }   
  20.      50%{   
  21.          height70px;   
  22.          margin: -15px 0;   
  23.          background: lightblue;   
  24.      }   
  25.  }   
  26.  .loading span:nth-child(2){   
  27.      -webkit-animation-delay:0.2s;   
  28.  }   
  29.  .loading span:nth-child(3){   
  30.      -webkit-animation-delay:0.4s;   
  31.  }   
  32.  .loading span:nth-child(4){   
  33.      -webkit-animation-delay:0.6s;   
  34.  }   
  35.  .loading span:nth-child(5){   
  36.      -webkit-animation-delay:0.8s;   
  37.  }  

第二种效果:

CSS3轻松实现清新 Loading 效果的简单实例

HTML部分

XML/HTML Code复制内容到剪贴板
  1. <div class="loadEffect">  
  2.      <span></span>  
  3.      <span></span>  
  4.      <span></span>  
  5.      <span></span>  
  6.      <span></span>  
  7.      <span></span>  
  8.      <span></span>  
  9.      <span></span>  
  10. </div>  

CSS3部分

CSS Code复制内容到剪贴板
  1. .loadEffect{   
  2.     width100px;   
  3.     height100px;   
  4.     positionrelative;   
  5.     margin: 0 auto;   
  6.     margin-top:100px;   
  7.  }   
  8.  .loadEffect span{   
  9.     displayinline-block;   
  10.     width16px;   
  11.     height16px;   
  12.     border-radius: 50%;   
  13.     background: lightgreen;   
  14.     positionabsolute;   
  15.     -webkit-animation: load 1.04s ease infinite;   
  16.  }   
  17.  @-webkit-keyframes load{   
  18.     0%{   
  19.        opacity: 1;   
  20.     }   
  21.     100%{   
  22.        opacity: 0.2;   
  23.     }   
  24.  }   
  25.  .loadEffect span:nth-child(1){   
  26.     left: 0;   
  27.     top: 50%;   
  28.     margin-top:-8px;   
  29.     -webkit-animation-delay:0.13s;   
  30.  }   
  31.  .loadEffect span:nth-child(2){   
  32.     left14px;   
  33.     top14px;   
  34.     -webkit-animation-delay:0.26s;   
  35.  }   
  36.  .loadEffect span:nth-child(3){   
  37.     left: 50%;   
  38.     top: 0;   
  39.     margin-left: -8px;   
  40.     -webkit-animation-delay:0.39s;   
  41.  }   
  42.  .loadEffect span:nth-child(4){   
  43.     top14px;   
  44.     rightright:14px;   
  45.     -webkit-animation-delay:0.52s;   
  46.  }   
  47.  .loadEffect span:nth-child(5){   
  48.     rightright: 0;   
  49.     top: 50%;   
  50.     margin-top:-8px;   
  51.     -webkit-animation-delay:0.65s;   
  52.  }   
  53.  .loadEffect span:nth-child(6){   
  54.     rightright14px;   
  55.     bottombottom:14px;   
  56.     -webkit-animation-delay:0.78s;   
  57.  }   
  58.  .loadEffect span:nth-child(7){   
  59.     bottombottom: 0;   
  60.     left: 50%;   
  61.     margin-left: -8px;   
  62.     -webkit-animation-delay:0.91s;   
  63.  }   
  64.  .loadEffect span:nth-child(8){   
  65.     bottombottom14px;   
  66.     left14px;   
  67.     -webkit-animation-delay:1.04s;   
  68.  }  

上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请给我留言!

更多效果如下所示:

CSS3轻松实现清新 Loading 效果的简单实例

第三种loading效果

CSS3轻松实现清新 Loading 效果的简单实例

第四种loading效果

CSS3轻松实现清新 Loading 效果的简单实例

第五种loading效果

CSS3轻松实现清新 Loading 效果的简单实例

第六种loading效果

CSS3轻松实现清新 Loading 效果的简单实例

第七种loading效果

这些效果都是用CSS3实现的,是不是很厉害,想要学习的小伙伴记得给我留言哦!如果大家有更牛气的效果记得偷偷的发给我哦!

以上这篇CSS3轻松实现清新 Loading 效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 #HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 #HTML / CSS
CSS3美化表单控件全集
Jun 29 #HTML / CSS
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 #HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 #HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 #HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
简单谈谈python中的多进程
2016/11/06 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
技能比武方案
2014/05/21 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python