实现微信语音扬声器播放效果动画

发表于 | 更新于 | 阅读次数 1
CSSS实现仿微信语音动画效果

效果图如下：

思路：
利用一张雪碧图背景图来切换实现动画效果，通过变化图片的background-position来实现背景图的切换，不要使用3张img图片，因为img只能控制图片显示隐藏，动画效果不明显。

雪碧图如下：

具体实现如下：

1
div.audio-anibox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.audio-anibox{
  width: r(23);
  height: r(29);
  background: url('../assets/audio_ani.png') no-repeat;
  background-size: r(23) r(87);
  background-position: 0 r(-58); /* 默认显示第三张 */
}

.audio-animation {
  animation: voiceplay 2s infinite step-start;
} 
@keyframes voiceplay{
  0%, 100%{
    background-position: 0 r(-58); 
  }
  33.333%{
    background-position: 0 0;
  }
  66.666%{
    background-position: 0 r(-29);
  }
}

通过追加class实现效果

参考：http://blog.csdn.net/wowkk/article/details/53582339