先上效果圖，由於時間關係，記錄下實現過程。
仔細**效果，實現思路及用到的css3如下：
採用svg繪製喇叭主體(假定喇叭由左右2個path組成)，動效實現：
1，插入聲波弧線並將位置matrix到喇叭口的豎線上:
3,為了使動畫更精緻,我們在喇叭口的豎線上再新增個豎線path,作為聲波開始時的喇叭口鼓起效果
4,click後的的'x'動畫則是最常見的關閉特效了,其實就是簡單的matrix即可實現.
上點步驟圖:
分析圖:
效果a:
效果b:
使用css3制動網頁動畫 1
學習筆記 關於css3動畫 animation 的上課小案例 animation 屬性是乙個簡寫屬性，用於設定六個動畫屬性 animation name 由 keyframe呼叫的動畫特徵 animation duration 動畫時間 animation timing function 動畫方式 ...
css3的動畫實現
關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...