首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS3实现10种Loading效果

所属分类： 网页制作 / CSS 阅读数： 644
收藏 0 赞 0 分享

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

第1种效果：

代码如下：

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种效果：

代码如下：

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种效果：

代码如下：

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种效果：

代码如下：

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种效果：

代码如下：

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实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

这篇文章主要介绍了纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果，运用checkbox的checked值来判断下级栏目是否展开，通过css3选择器提供的checked伪类来实现此效果，感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22