需求：語音播放動態(tài)效果

方案：使用如下圖片，利用 css animation @keyframes? 做動畫

html

<span class="horn" :class="{'active': scope.row.isPlay}"></span>?

<audio :id="'audio_'+scope.row.commentId" ref="audio" :src="scope.row.voiceUrl"></audio>

css

.horn{

? width: 25px;

? height: 20px;

? background-image: url('../../../assets/images/voice/icon.png');

? background-size: 100% 100%;

? position: absolute;

? left: 10px;

? top: 50%;

? // margin-top: 50%;

? transform: translateY(-49%);

}

.horn.active{

? animation: fadeInOut 1s infinite;

}

@keyframes fadeInOut {

? 0% {

? ? background-image: url('./assets/images/voice/1.png');

? }

? 70% {

? ? background-image: url('./assets/images/voice/2.png');

? }

? 90% {

? ? background-image: url('./../assets/images/voice/icon.png');

? }

}