杰晶网络

CSS3实现10种Loading效果
网页制作 2024/11/24 佚名
3 2

用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,Loading,加载
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“CSS3实现10种Loading效果”
暂无“CSS3实现10种Loading效果”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网