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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python下简易的单例模式详解
2019/04/08 Python
Python操作qml对象过程详解
2019/09/26 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
2014年小学教师工作自我评价
2014/09/22 职场文书
师德师风自查总结
2014/10/14 职场文书
个人先进事迹材料
2014/12/29 职场文书
总经理司机岗位职责
2015/04/10 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android