css动画特效-Loading

css动画特效-Loading

1.交错音符式

这种Loading如何让它们不在同一时刻运动？就要考虑CSS动画属性animation-delay，等待几秒（自己设定），然后开始动画。比如：第二个元素要比第一个元素晚0.2秒，也就是等待0.2秒，以此类推。以下代码可以展示效果：

//html
<div class="loading">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</div>

//对应的css
.loading{height: .841rem;display: flex;justify-content: center;}
.loading span{width: .252rem;height: 100%;background-color: #21F4F5;animation: load 1s ease infinite;margin: 0 .168rem;}
@keyframes load{
  0%,
  100% {
    transform: scaleY(1.5);
    background-color: #21F4F5;
  }
  50% {
    transform: scaleY(1);
    background-color: #21F4F5;
  }
}
.loading span:nth-child(2){animation-delay: 0.2s;}
.loading span:nth-child(3){animation-delay: 0.4s;}
.loading span:nth-child(4){animation-delay: 0.6s;}
.loading span:nth-child(5){animation-delay: 0.8s;}