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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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
一个简洁的多级别论坛
2006/10/09 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Tensorflow 多线程设置方式
2020/02/06 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
python集合能干吗
2020/07/19 Python
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
《会走路的树》教后反思
2014/04/19 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记