开心学习
当前位置：Web前端 > > 正文

css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

时间：2022-01-15 01:03:37类别：Web前端

css3特性动画图

CSS3轻松实现清新 Loading 效果的简单实例

至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。

第一种效果：

css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

HTML部分

  • XML/HTML Code复制内容到剪贴板
    1. <li class="loading">  
    2.      <span></span>  
    3.      <span></span>  
    4.      <span></span>  
    5.      <span></span>  
    6.      <span></span>  
    7. </li>  

    • CSS3部分

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

    • 第二种效果：

    css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

    HTML部分

  • XML/HTML Code复制内容到剪贴板
    1. <li 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. </li>  

    • CSS3部分

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

    • 上面这两个都是大家常用的加载效果，下面的就不依依的现实代码了，有需要的小伙伴请给我留言！

    更多效果如下所示：

    css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

    • 第三种loading效果

    css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

  • 第四种loading效果

    css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

  • 第五种loading效果

    css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

  • 第六种loading效果

    css3特性动画图（CSS3轻松实现清新 Loading 效果的简单实例）

  • 第七种loading效果

    这些效果都是用CSS3实现的，是不是很厉害，想要学习的小伙伴记得给我留言哦！如果大家有更牛气的效果记得偷偷的发给我哦！

    以上这篇CSS3轻松实现清新 Loading 效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持开心学习网。

    标签：
    loading 实现 CSS3
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习