做有态度的前端团队

网易FEG前端团队

结合小组里_animation.less的几个Loading效果

之前我们写一些css3动画,每个语句都要写5遍有木有,-webkit-,-moz-......虽然我们可以复制,但是代码量一下子蹭蹭蹭就上去了,看得头晕,不简洁。还好我们小组有一个已经封装好_animation.less。
以下是几个loading栗子。

效果预览戳我戳我

第一个效果

one.png

<div class="loader-inner ball-clip-rotate">
     <div></div>
</div>
.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  .animation-fill-mode:both;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  height: 25px;
  width: 25px;
  background: transparent !important;
  display: inline-block;
  .rotate();
  .animation(rotate 0.75s 0s linear infinite);
}
.rotate(@n:rotate){
    .keyframes(@n);
    .-frames(@-...){
      0% {
        @{-}transform: rotate(0deg) scale(1);
      }
      50% {
        @{-}transform: rotate(1800deg) scale(0.6);
      }
      100% {
        @{-}transform: rotate(360deg) scale(1);
      }
    }
}

第二个效果

two.png

<div class="loader-inner ball-scale-multiple">
     <div></div>
     <div></div>
     <div></div>
</div>
.ball-scale-multiple(@n:ball-scale-multiple){
    .keyframes(@n);
    .-frames(@-...){
      0% {
        @{-}transform: scale(0);
        @{-}opacity:0;
      }
      5% {
        @{-}opacity:1;
      }
      100% {
        @{-}transform: scale(1);
        @{-}opacity:0;
      }
    }
}
.ball-scale-multiple {
  position: relative;
    .transform(translateY(-30px));
  }
  .ball-scale-multiple > div:nth-child(2) {
     .animation-delay(0.2s);
  }
  .ball-scale-multiple > div:nth-child(3) {
     .animation-delay(0.4s);
  }
  .ball-scale-multiple > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    .animation-fill-mode:both;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    .ball-scale-multiple();       
    .animation(ball-scale-multiple 1s 0s linear infinite);
  }

更多效果戳git

QQ图片20160729161657.gif

手机阅读请扫描下方二维码: