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.             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.         }   
  38.   

第2种效果:

CSS3实现10种Loading效果

代码如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loading">  
  2.         <span></span>  
  3. </div>  
  4.   
CSS Code复制内容到剪贴板
  1. .loading{   
  2.             width150px;   
  3.             height4px;   
  4.             border-radius: 2px;   
  5.             margin: 0 auto;   
  6.             margin-top:100px;   
  7.             positionrelative;   
  8.             background: lightgreen;   
  9.             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
  10.         }   
  11.         .loading span{   
  12.             displayinline-block;   
  13.             width16px;   
  14.             height16px;   
  15.             border-radius: 50%;   
  16.             background: lightgreen;   
  17.             positionabsolute;   
  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-left142px;   
  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.             width150px;   
  3.             height15px;   
  4.             margin: 0 auto;   
  5.             positionrelative;   
  6.             margin-top:100px;   
  7.         }   
  8.         .loading span{   
  9.             positionabsolute;   
  10.             width15px;   
  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.             width150px;   
  3.             height15px;   
  4.             margin: 0 auto;   
  5.             margin-top:100px;   
  6.             text-aligncenter;   
  7.         }   
  8.         .loading span{   
  9.             displayinline-block;   
  10.             width15px;   
  11.             height: 100%;   
  12.             margin-right5px;   
  13.             background: lightgreen;   
  14.             -webkit-animation: load 1.04s ease infinite;   
  15.         }   
  16.         .loading span:last-child{   
  17.             margin-right0px;    
  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.             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.         }  

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

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

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

HTML / CSS 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 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
You might like
PHP 采集程序 常用函数
2008/12/18 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php防止sql注入的方法详解
2017/02/20 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python的等深分箱实例
2019/11/22 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
Java基础类库面试题
2013/09/04 面试题
2014年圣诞节促销方案
2014/03/14 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
自我推荐信格式模板
2015/03/24 职场文书
人事任命通知书
2015/04/21 职场文书
旗帜观后感
2015/06/08 职场文书
芙蓉镇观后感
2015/06/10 职场文书
同学会演讲稿
2019/04/02 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL