圖片和CSS製作動畫按鈕

來源:互聯網
上載者:User
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對象的偽類 HOVERACTIVE來類比FLASH裡面的指標經過按下效果,實事上還是有些差別的,另外彈起的按鈕 就是 link的普通狀態了.

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

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

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

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

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

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

 

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

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

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

例子打包:source.rar



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。