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 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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
php木马攻击防御之道
2008/03/24 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
js实现小时钟效果
2020/03/25 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python连接字符串的方法小结
2015/07/13 Python
Python实现excel转sqlite的方法
2017/07/17 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
实习教师自我鉴定
2013/12/12 职场文书
先进个人材料怎么写
2014/12/30 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
趣味运动会简讯
2015/07/20 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis