css animation @keyframes 动画
2021-01-14 本文已影响0人
TDX田冬雪
需求：语音播放动态效果
方案：使用如下图片，利用 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');
}
}
