模拟音乐播放效果

第一种方案是从中间上下变化

i {
  height: .2rem;
  &:nth-child(1) {
    height: .12rem;
  }
  &:nth-child(2) {
    height: .18rem;
  }
  &:nth-child(3) {
    height: .2rem;
  }
  &:nth-child(4) {
    height: .16rem;
  }
}
.keyframes(living, {
  0% {
    .transform(scaleY(1));
  }
  50% {
    .transform(scaleY(.3));
  }
  100% {
    .transform(scaleY(1));
  }
});
@keyframs living{
   0% {
    .transform(scaleY(1));
  }
  50% {
    .transform(scaleY(.3));
  }
  100% {
    .transform(scaleY(1));
  }
}
i {
 &:nth-child(1) {
  .animation(living .8s .3s linear infinite backwards);
  }
 &:nth-child(2) {
  .animation(living .8s -.6s linear infinite backwards);
 }
 &:nth-child(3) {
  .animation(living .8s -.8s linear infinite backwards);
 }
 &:nth-child(4) {
  .animation(living .8s -1.1s linear infinite backwards);
 }
}

第二种是底部固定，高度变化

.keyframes(living, {
  0% {
    height: 10px;
  }
  50% {
    height: 1px;
  }
  100% {
     height: 10px;
  }
});
@keyframs living{
  0% {
    height: 10px;
  }
  50% {
    height: 1px;
  }
  100% {
     height: 10px;
  }
}
.line1 {
  animation: living 0.6s infinite alternate;
}
.line2 {
  animation: living 0.6s 0.2s infinite alternate;
}