码迷,mamicode.com
首页 > Web开发 > 详细

CSS3轻松实现清新 Loading 效果

时间:2016-06-24 12:36:03      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

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

第一种效果:

技术分享

HTML部分

技术分享
1 <div class="loading">
2      <span></span>
3      <span></span>
4      <span></span>
5      <span></span>
6      <span></span>
7 </div>
技术分享

 

CSS3部分

技术分享
.loading{
     width: 80px;
     height: 40px;
     margin: 0 auto;
     margin-top:100px;
 }
 .loading span{
     display: inline-block;
     width: 8px;
     height: 100%;
     border-radius: 4px;
     background: lightgreen;
     -webkit-animation: load 1s ease infinite;
 }
 @-webkit-keyframes load{
     0%,100%{
         height: 40px;
         background: lightgreen;
     }
     50%{
         height: 70px;
         margin: -15px 0;
         background: lightblue;
     }
 }
 .loading span:nth-child(2){
     -webkit-animation-delay:0.2s;
 }
 .loading span:nth-child(3){
     -webkit-animation-delay:0.4s;
 }
 .loading span:nth-child(4){
     -webkit-animation-delay:0.6s;
 }
 .loading span:nth-child(5){
     -webkit-animation-delay:0.8s;
 }
技术分享

 

第二种效果:

技术分享

HTML部分

技术分享
<div class="loadEffect">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>
技术分享

 

CSS3部分

技术分享
.loadEffect{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
 }
 .loadEffect span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
 }
 @-webkit-keyframes load{
    0%{
       opacity: 1;
    }
    100%{
       opacity: 0.2;
    }
 }
 .loadEffect span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
 }
 .loadEffect span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
 }
 .loadEffect span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
 }
 .loadEffect span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
 }
 .loadEffect span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
 }
 .loadEffect span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
 }
 .loadEffect span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
 }
 .loadEffect span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
 }
技术分享

 

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

更多效果如下所示:

技术分享

第三种loading效果

技术分享

第四种loading效果

技术分享

第五种loading效果

技术分享

第六种loading效果

技术分享

第七种loading效果

CSS3轻松实现清新 Loading 效果

标签:

原文地址:http://www.cnblogs.com/nxxshxf/p/5613364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!