先上效果圖，因爲時間關係，記錄下實現過程。

仔細觀看效果，實現思路及用到的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: