react-app-shell/activity/src/components/audio/audio.less

react打包脚本和example, 这里的版本请忽略

.audio {
  position: relative;
  max-width: 590px;
  //border: 1px solid; /* no */
  padding: 28px 114px 26px 32px;
  word-break: break-all;
  white-space: normal;
  cursor: pointer;
}

.normal::after,
.active::after {
  position: absolute;
  content: '';
  top: 32px;
  right: 30px;
  width: 32px;
  height: 28px;
  background: url('../../public/images/feedback/audio-play.png') no-repeat;
  background-size: 30px 28px;
}

.active::after {
  animation: play 1s step-end infinite;
}

@keyframes play {
  0% {
    width: 5px;
    right: 57px;
  }

  50% {
    width: 18px;
    right: 44px;
  }

  80% {
    width: 30px;
    right: 32px;
  }

  100% {
    width: 32px;
    right: 30px;
  }
}

.point {
  position: absolute;
  right: -18px;
  top: 50%;
  width: 8px;
  height: 8px;
  background: url('../../public/images/feedback/point.png');
  background-size: 100%;
  transform: scale(0.9);
}