🌓
搜索
 找回密码
 立即注册

CSS3实现5种Loading效果

html5时代 2018-3-22 00:08:38 85515
返回列表 发新帖
html5时代
第1种效果：
 

代码如下：

  1. <div class="loading">

  2.         <span></span>

  3.         <span></span>

  4.         <span></span>

  5.         <span></span>

  6.         <span></span>

  7. </div>


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



第2种效果：
 
代码如下：

  1. <div class="loading">

  2.         <span></span>

  3. </div>


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


第3-5种效果：
 


  
代码如下：

  1. <div class="loading">

  2.         <span></span>

  3.         <span></span>

  4.         <span></span>

  5.         <span></span>

  6.         <span></span>

  7. </div>


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

  1. .loading{

  2.             width: 150px;

  3.             height: 15px;

  4.             margin: 0 auto;

  5.             margin-top:100px;

  6.         }

  7.         .loading span{

  8.             display: inline-block;

  9.             width: 15px;

  10.             height: 100%;

  11.             margin-right: 5px;

  12.             border-radius: 50%;

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



  1. .loading{

  2.             width: 150px;

  3.             height: 15px;

  4.             margin: 0 auto;

  5.             margin-top:100px;

  6.         }

  7.         .loading span{

  8.             display: inline-block;

  9.             width: 15px;

  10.             height: 100%;

  11.             margin-right: 5px;

  12.             border-radius: 50%;

  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.                 -webkit-transform: scale(1.3);

  23.             }

  24.             100%{

  25.                 opacity: 0.2;

  26.                 -webkit-transform: scale(.3);

  27.             }

  28.         }

  29.         .loading span:nth-child(1){

  30.             -webkit-animation-delay:0.13s;

  31.         }

  32.         .loading span:nth-child(2){

  33.             -webkit-animation-delay:0.26s;

  34.         }

  35.         .loading span:nth-child(3){

  36.             -webkit-animation-delay:0.39s;

  37.         }

  38.         .loading span:nth-child(4){

  39.             -webkit-animation-delay:0.52s;

  40.         }

  41.         .loading span:nth-child(5){

  42.             -webkit-animation-delay:0.65s;

  43.         }



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













扫一扫

css3 loading，css3加载loading，css3loading进度条，css3斜纹loading，css3loading旋转
59191.jpg
打赏

使用道具 举报

随机推荐

最新主题

0 回复

B Color Image Link Quote Code Smilies
高级模式
游客
返回
html5时代
积分
0 		主题
16 		精华
0
作者最近主题
© 2007-2022 DigitalDawn 沪ICP备17015288号-11繁体中文
返回顶部