使用圖片和CSS結合製作動畫按鈕

css|按鈕

很多時候大家可以看到FLASH裡面的按鈕可以是動畫的,而大部分HTML作出來的按鈕都是單幀切換的.其實做成動畫也是可行的.
先看看下面的預覽圖片

滑鼠移動上去,滑鼠點擊,滑鼠移開

下面是實際效果，親自體驗一下

a{display:block;height:31px;width:88px;background-image:url(圖1)}
a:hover{background-image:url(圖2)}
a:active{background-image:url(圖3)}

其實最重要的是在動畫圖片本身

首先看看這個圖片,似曾相識把.原理是一樣的

我們用 LINK對象的偽類 HOVER 和ACTIVE來類比FLASH裡面的指標經過和按下效果,實事上還是有些差別的,另外彈起的按鈕 就是 link的普通狀態了.

理解這些了再來看動畫本身,第二個例子裡面有三個圖片

圖1 從 [滑鼠點我]->[謝謝惠顧]

圖2 從 [謝謝惠顧]->[滑鼠點我]

圖3 文字下沉一下,類比點擊效果

滑鼠移動上去的時候 播放圖片2 那麼動畫自動滾動到[滑鼠點我]
滑鼠移開的時候  播放圖片1 那麼動畫自動滾動到[謝謝惠顧]
滑鼠點擊的時候 播放圖片3.

下面是Fireworks製作按鈕的動畫的一些描述。這兩個圖片是滑鼠經過和移開的源檔案

 

開啟看看，其實和普通的動畫一樣，不過要注意一個小細節

匯出的GIF動畫之前記得在幀面板選擇[不迴圈]。秘訣記心中.....

tips:代碼只是簡單的HTML和CSS製作.所以效果不是特別完美,如果採用HTML配合javascript的一些行為來製作,可以完全類比出flash的按鈕的四個狀態.不過同時也要看到這個方法的弊端,圖片大,載入慢,第一次滑鼠移動上去的時候會出現缺失效果.

例子打包：source.rar