先上效果图，因为时间关系，记录下实现过程。

仔细观看效果，实现思路及用到的css3以下：
采用svg绘制喇叭主体(假定喇叭由左右2个path组成)，动效实现：
1，插入声波弧线并将位置matrix到喇叭口的竖线上:

<g opacity="0" transform="matrix(1,0,0,1,32,10.859)" id='line1'>
<path  d='M-1.499,9.001 C0.39,6.494 1.5,3.377 1.5,0.001 C1.5,-3.38 0.39,-6.494 -1.5,-9.001'>
</g>
<g opacity="0" transform="matrix(1,0,0,1,32,10.859)" id='line2'>
<path d='M-1.499,9.001 C0.39,6.494 1.5,3.377 1.5,0.001 C1.5,-3.38 0.39,-6.494 -1.5,-9.001'>
</g>

2,这样经过控制css animate控制opacity及matrix便可达到声波纹动画
3,为了使动画更精致,咱们在喇叭口的竖线上再添加个竖线path,做为声波开始时的喇叭口鼓起效果
4,click后的的'x'动画则是最多见的关闭特效了,其实就是简单的matrix便可实现.

上点步骤图:

分析图:

效果A:

效果B: