首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现10种Loading效果

Posted in HTML / CSS onJuly 11, 2016

用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

CSS3实现10种Loading效果

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3.         <span></span>  
  4.         <span></span>  
  5.         <span></span>  
  6.         <span></span>  
  7. </div>  
CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width: 80px;   
  3.             height: 40px;   
  4.             margin: 0 auto;   
  5.             margin-top:100px;   
  6.         }   
  7.         .loading span{   
  8.             display: inline-block;   
  9.             width: 8px;   
  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.                 height: 40px;   
  18.                 background: lightgreen;   
  19.             }   
  20.             50%{   
  21.                 height: 70px;   
  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.         }   
  38.   

第2种效果：

CSS3实现10种Loading效果

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3. </div>  
  4.   
CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width: 150px;   
  3.             height: 4px;   
  4.             border-radius: 2px;   
  5.             margin: 0 auto;   
  6.             margin-top:100px;   
  7.             position: relative;   
  8.             background: lightgreen;   
  9.             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
  10.         }   
  11.         .loading span{   
  12.             display: inline-block;   
  13.             width: 16px;   
  14.             height: 16px;   
  15.             border-radius: 50%;   
  16.             background: lightgreen;   
  17.             position: absolute;   
  18.             margin-top: -7px;   
  19.             margin-left:-8px;   
  20.             -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
  21.         }   
  22.         @-webkit-keyframes changeBgColor{   
  23.             0%{   
  24.                 background: lightgreen;   
  25.             }   
  26.             100%{   
  27.                 background: lightblue;   
  28.             }   
  29.         }   
  30.         @-webkit-keyframes changePosition{   
  31.             0%{   
  32.                 background: lightgreen;   
  33.             }   
  34.             100%{   
  35.                 margin-left: 142px;   
  36.                 background: lightblue;   
  37.             }   
  38.         }   
  39.   

第3-5种效果：

CSS3实现10种Loading效果

CSS3实现10种Loading效果

CSS3实现10种Loading效果

代码如下：

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

第3-5种效果的css样式分别为：

CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width: 150px;   
  3.             height: 15px;   
  4.             margin: 0 auto;   
  5.             position: relative;   
  6.             margin-top:100px;   
  7.         }   
  8.         .loading span{   
  9.             position: absolute;   
  10.             width: 15px;   
  11.             height: 100%;   
  12.             border-radius: 50%;   
  13.             background: lightgreen;   
  14.             -webkit-animation: load 1.04s ease-in infinite alternate;   
  15.         }   
  16.         @-webkit-keyframes load{   
  17.             0%{   
  18.                 opacity: 1;   
  19.                 -webkit-transform: translate(0px);   
  20.             }   
  21.             100%{   
  22.                 opacity: 0.2;   
  23.                 -webkit-transform: translate(150px);   
  24.             }   
  25.         }   
  26.         .loading span:nth-child(1){   
  27.             -webkit-animation-delay:0.13s;   
  28.         }   
  29.         .loading span:nth-child(2){   
  30.             -webkit-animation-delay:0.26s;   
  31.         }   
  32.         .loading span:nth-child(3){   
  33.             -webkit-animation-delay:0.39s;   
  34.         }   
  35.         .loading span:nth-child(4){   
  36.             -webkit-animation-delay:0.52s;   
  37.         }   
  38.         .loading span:nth-child(5){   
  39.             -webkit-animation-delay:0.65s;   
  40.         }  

第6-8种效果：

CSS3实现10种Loading效果

CSS3实现10种Loading效果

CSS3实现10种Loading效果

代码如下：

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

第6-8种效果的css样式分别为：

CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width: 150px;   
  3.             height: 15px;   
  4.             margin: 0 auto;   
  5.             margin-top:100px;   
  6.             text-align: center;   
  7.         }   
  8.         .loading span{   
  9.             display: inline-block;   
  10.             width: 15px;   
  11.             height: 100%;   
  12.             margin-right: 5px;   
  13.             background: lightgreen;   
  14.             -webkit-animation: load 1.04s ease infinite;   
  15.         }   
  16.         .loading span:last-child{   
  17.             margin-right: 0px;    
  18.         }   
  19.         @-webkit-keyframes load{   
  20.             0%{   
  21.                 opacity: 1;   
  22.             }   
  23.             100%{   
  24.                 opacity: 0;   
  25.             }   
  26.         }   
  27.         .loading span:nth-child(1){   
  28.             -webkit-animation-delay:0.13s;   
  29.         }   
  30.         .loading span:nth-child(2){   
  31.             -webkit-animation-delay:0.26s;   
  32.         }   
  33.         .loading span:nth-child(3){   
  34.             -webkit-animation-delay:0.39s;   
  35.         }   
  36.         .loading span:nth-child(4){   
  37.             -webkit-animation-delay:0.52s;   
  38.         }   
  39.         .loading span:nth-child(5){   
  40.             -webkit-animation-delay:0.65s;   
  41.         }  

第9-10种效果：

CSS3实现10种Loading效果

CSS3实现10种Loading效果

代码如下：

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>  

CSS样式分别为：

CSS Code复制内容到剪贴板
  1. .loadEffect{   
  2.             width: 100px;   
  3.             height: 100px;   
  4.             position: relative;   
  5.             margin: 0 auto;   
  6.             margin-top:100px;   
  7.         }   
  8.         .loadEffect span{   
  9.             display: inline-block;   
  10.             width: 16px;   
  11.             height: 16px;   
  12.             border-radius: 50%;   
  13.             background: lightgreen;   
  14.             position: absolute;   
  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.             left: 14px;   
  33.             top: 14px;   
  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.             top: 14px;   
  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.             rightright: 14px;   
  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.             bottombottom: 14px;   
  66.             left: 14px;   
  67.             -webkit-animation-delay:1.04s;   
  68.         }  

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

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

本文链接：http://www.cnblogs.com/jr1993/p/4622039.html

CSS3实现10种Loading效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
css3media响应式布局实例
Jul 08 #HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 #HTML / CSS
证明书(326) 计划书(118) 广播稿(323) 事迹材料(636) 答谢词(97) 接收函(23) 辞职信(98) 感言(394) 方案(1080) 教学反思(909)
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
php 什么是PEAR？(第二篇)
2009/03/19 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP使用DOMDocument类生成HTML实例（包含常见标签元素）
2014/06/25 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
AngularJS入门教程（零）：引导程序
2014/12/06 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
初识NodeJS服务端开发入门（Express+MySQL）
2017/04/07 NodeJs
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python实现根据文件格式分类
2019/10/31 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
班子成员四风问题自我剖析材料
2014/09/29 职场文书
公司租房协议书范本
2014/10/08 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
工程合作意向书范本
2015/05/09 职场文书
费城故事观后感
2015/06/10 职场文书
老乡会致辞
2015/07/28 职场文书
Node.js实现断点续传
2021/06/23 Javascript
Python Django项目和应用的创建详解
2021/11/27 Python