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

加载动画css

时间:2017-06-02 11:32:08      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:1.2   relative   class   20px   radius   isp   key   ati   loading   

     <div class="loadEffect">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
      </div>
      .loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: scale(1.2);
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(.3);
                opacity: 0.5;
            }
        }
.loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-10px;
            -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: -10px;
            -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:-10px;
            -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: -10px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }

 

 
html部分
<
div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS部分    
.loading
{ width: 150px; height: 15px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 15px; height: 100%; margin-right: 5px; border-radius: 50%; background: lightgreen; -webkit-animation: load 1.04s ease infinite; } .loading span:last-child{ margin-right: 0px; } @-webkit-keyframes load{ 0%{ opacity: 1; -webkit-transform: scale(1.3); } 100%{ opacity: 0.2; -webkit-transform: scale(.3); } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; }

 

加载动画css

标签:1.2   relative   class   20px   radius   isp   key   ati   loading   

原文地址:http://www.cnblogs.com/szatpig/p/6931990.html

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