animation实现loading

视频地址：点此查看

上期我们浅学了一下css的animation

这个视频我们使用animation属性做一个loading效果

首先看一下这段代码

.spinner{
  width: 60px;
  height: 60px;
  position: relative;
  margin: 100px auto;
}
.spinner div{
  background-color: #67cf22;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  right:0px;
  bottom: 0px;
}

<div class="spinner">
  <div></div>
  <div></div>
</div>

这段代码很简单

一个父div里面两个子div

给父div设置成60像素的正方形

并且相对定位

让他在页面水平居中

然后给子设置绝对定位铺满父级

是一个绿色的圆形

效果是这样的

接下来我们要让它动起来

首先需要定义动画规则

@keyframes loading{
  0%,100% {transform: scale(0);}
  50% {transform: scale(1);}
}

我们定义了一个名为loading的动画规则

然后将这个动画规则作用于子div上

animation: loading 2.0s infinite ease-in-out;

设置完成这段动画需要2秒

动画周期循环

动画速度由低速开始和结束

这个时候我们可以发现他已经可以动起来了

但是发现没有层次感

毕竟我们两个子级

这样就没有体现出来两个子级的效果

我们为第二个子元素设置一个动画延迟

.spinner div:nth-child(2){
  animation-delay: -1s;
}

这样看起来好像是正常了

然后我们给子元素设置个透明度（opacity）就一目了然了

opacity: .6;

最后希望这个视频能对你有所帮助