css实现动态正在加载图标
技术学院󰃄 2019-06-05     󰃩 335 次查看

利用keyframes动画实现




.er-button-loading .er-button-style:before {
  content: "f110";
  font-family: "FontAwesome";
  display: inline-block;
  z-index: 2;
  background: inherit;
  font-size: 1.4em;
  padding: inherit;
  -webkit-animation: loading 1s step-start;
  -webkit-animation-iteration-count: infinite;///播放动画次数,infinite表示循环播放
}
@keyframes loading {
   0%{
     transform: rotate(0deg);
     transform-origin: center;///旋转的基点位置,center表示从中间开始旋转
   }
  11%{
    transform: rotate(40deg);
    transform-origin: center;
  }
  22%{
    transform: rotate(80deg);
    transform-origin: center;
  }
  33%{
    transform: rotate(120deg);
    transform-origin: center;
  }
  44%{
    transform: rotate(160deg);
    transform-origin: center;
  }
  55%{
    transform: rotate(200deg);
    transform-origin: center;
  }
  66%{
    transform: rotate(240deg);
    transform-origin: center;
  }
  77%{
    transform: rotate(280deg);
    transform-origin: center;
  }
  88%{
    transform: rotate(320deg);
    transform-origin: center;
  }
   100%{
     transform: rotate(360deg);
     transform-origin: center;
   }
 }
@-webkit-keyframes loading {
  0%{
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: center;
  }
  11%{
    -webkit-transform: rotate(40deg);
    -webkit-transform-origin: center;
  }
  22%{
    -webkit-transform: rotate(80deg);
    -webkit-transform-origin: center;
  }
  33%{
    -webkit-transform: rotate(120deg);
    -webkit-transform-origin: center;
  }
  44%{
    -webkit-transform: rotate(160deg);
    -webkit-transform-origin: center;
  }
  55%{
    -webkit-transform: rotate(200deg);
    -webkit-transform-origin: center;
  }
  66%{
    -webkit-transform: rotate(240deg);
    -webkit-transform-origin: center;
  }
  77%{
    -webkit-transform: rotate(280deg);
    -webkit-transform-origin: center;
  }
  88%{
    -webkit-transform: rotate(320deg);
    -webkit-transform-origin: center;
  }
  100%{
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: center;
  }
}




转载出处:本文章(教程)为本站原创,未经许可、禁止转载!




首页
技术
资源
我的