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

CSS3轻松实现清新 Loading 效果

时间:2016-05-18 10:59:54      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:css3   loading   

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


第一种效果:

技术分享

HTML部分

<div class="loading">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</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;
 }

上面这两个都是大家常用的加载效果,下面的就不依依的现实代码了,有需要的小伙伴请点击小月博客!

======================================

更多资源请点击: http://www.aliyue.net

=======================================



更多效果如下所示:

技术分享

第三种loading效果

技术分享

第四种loading效果

技术分享

第五种loading效果

技术分享

第六种loading效果

技术分享

第七种loading效果

 

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





本文出自 “小月博客” 博客,请务必保留此出处http://aliyue.blog.51cto.com/11564403/1774595

CSS3轻松实现清新 Loading 效果

标签:css3   loading   

原文地址:http://aliyue.blog.51cto.com/11564403/1774595

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