您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 移動前端 >> 瀏覽設(shè)計教程

巧用HTML5給按鈕背景設(shè)計不同的動畫簡單實例

如何巧用HTML5設(shè)計按鈕背景不同動畫殊效,在該殊效中,當(dāng)鼠標滑過按鈕時,使用CSS3   animation 來動畫   background-size  和  background-position  屬性,來實現(xiàn)各種背景動畫結(jié)果。

下面來看一下團體的結(jié)果圖:

詳細實現(xiàn):

1. CSS樣式

首先為按鈕設(shè)置通用樣式。將按鈕的背景去除,設(shè)置2像素的實線邊框,并將底部邊框設(shè)置為4個像素。通過padding來設(shè)置按鈕的尺寸,并為按鈕的筆墨顏色設(shè)置平滑動畫過渡結(jié)果。

第一種按鈕背景動畫:

在第一種按鈕背景動畫中,按鈕的背景使用2個漸變圖層來制作。當(dāng)鼠標滑過按鈕時實行halftone幀動畫,該動畫修改按鈕的background-size屬性。它縮小了背景圖片的尺寸,使所有的圓點連成一片。

第二種按鈕背景動畫:

第二種按鈕背景動畫中,使用線性漸變作為按鈕的背景圖像。在鼠標滑過按鈕時,通過修改按鈕的background-position屬性,使背景位置賡續(xù)發(fā)生轉(zhuǎn)變,形成斑馬線活動結(jié)果。

第三種按鈕背景動畫:

第三種按鈕背景動畫中,使用花點漸變作為按鈕的背景圖像。在鼠標滑過按鈕時,通過修改按鈕的background-position屬性,使背景位置賡續(xù)發(fā)生轉(zhuǎn)變,形成點活動結(jié)果。

第四種按鈕背景動畫:

第四種按鈕背景動畫中,使用波浪變作為按鈕的背景圖像。在鼠標滑過按鈕時,通過修改按鈕的background-position屬性,使背景位置賡續(xù)發(fā)生轉(zhuǎn)變,形成波浪動態(tài)活動結(jié)果。

第五種按鈕背景動畫:

第五種按鈕背景動畫中,使用斜線變作為按鈕的背景圖像。在鼠標滑過按鈕時,通過修改按鈕的background-position屬性,使背景位置賡續(xù)發(fā)生轉(zhuǎn)變,形成斜線活動結(jié)果。

第六種按鈕背景動畫:

第六種按鈕背景動畫中,使用圓形閃動漸變作為按鈕的背景圖像。在鼠標滑過按鈕時,通過修改按鈕的background-position屬性,使背景位置賡續(xù)發(fā)生轉(zhuǎn)變,形成圓形閃動結(jié)果。

這就是六個按鈕的每個結(jié)果和代碼,除了這個css樣式還可以使用一些標準的組件來制作。

以上這篇巧用HTML5給按鈕背景設(shè)計不同的動畫簡單實例就是小編分享給大家的悉數(shù)內(nèi)容了,盼望能給大家一個參考,也盼望大家多多支持圖趣網(wǎng)。

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd3359.html
淺談h5自定義audio題目及解決
HTML5中判斷橫屏豎屏的方法移動端
圖趣網(wǎng)微信
建議反饋
×