css实现的抖动的音符音浪效果

<style>
@keyframes playon{0%{height:70%} 50%{height:100%} 100%{height:35%}}

.play-on {
  display: block;
  height: 8px;
  position: absolute;
  left: calc(50% - 11px);
  bottom: 0;
}
.play-on i {
  width: 4px;
  height: 6px;
  border-radius: 4px 4px 0 0;
  background-color: #E50916;
  position: absolute;
  bottom: 0;
  left: 0;
}
.play-on i:nth-last-child(1) {
  animation: playon .8s .3s infinite;
}

.play-on i:nth-last-child(2) {
  animation: playon .8s .1s infinite;
  left: 6px;
}
.play-on i:nth-last-child(3) {
  animation: playon .6s .2s infinite;
  left: 12px;
}

.play-on i:nth-last-child(4) {
  animation: playon 1s .3s infinite;
  left: 18px;
}

</style>
<em class="play-on"><i></i><i></i><i></i><i></i></em>