前言

大家都知道，如今移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)來(lái)臨，HTML5的出現(xiàn)，更是讓移動(dòng)互聯(lián)網(wǎng)火的發(fā)紫，很多朋友甚至選擇報(bào)HTML5開(kāi)發(fā)培訓(xùn)班都要擠進(jìn)這個(gè)移動(dòng)互聯(lián)網(wǎng)時(shí)代，由此可以看出，HTML5重度精品將要來(lái)臨。

今天來(lái)給大家介紹一下HTML5，講什么呢?講講如何巧用HTML5設(shè)計(jì)按鈕背景不同動(dòng)畫特效，在該特效中，當(dāng)鼠標(biāo)滑過(guò)按鈕時(shí)，使用CSS3 animation來(lái)動(dòng)畫background-size和background-position屬性，來(lái)實(shí)現(xiàn)各種背景動(dòng)畫效果。

下面來(lái)看一下整體的效果圖：

看了動(dòng)畫效果之后大家應(yīng)該非常關(guān)心他是如何實(shí)現(xiàn)的,現(xiàn)在就給大家具體講講他的實(shí)現(xiàn)技巧.

具體實(shí)現(xiàn)

1. CSS樣式

首先為按鈕設(shè)置通用樣式。將按鈕的背景去除，設(shè)置2像素的實(shí)線邊框，并將底部邊框設(shè)置為4個(gè)像素。通過(guò)padding來(lái)設(shè)置按鈕的尺寸，并為按鈕的文字顏色設(shè)置平滑動(dòng)畫過(guò)渡效果。

第一種按鈕背景動(dòng)畫

在第一種按鈕背景動(dòng)畫中，按鈕的背景使用2個(gè)漸變圖層來(lái)制作。當(dāng)鼠標(biāo)滑過(guò)按鈕時(shí)執(zhí)行halftone幀動(dòng)畫，該動(dòng)畫修改按鈕的background-size屬性。它縮小了背景圖片的尺寸，使所有的圓點(diǎn)連成一片。

第二種按鈕背景動(dòng)畫

第二種按鈕背景動(dòng)畫中，使用線性漸變作為按鈕的背景圖像。在鼠標(biāo)滑過(guò)按鈕時(shí)，通過(guò)修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成斑馬線運(yùn)動(dòng)效果。

第三種按鈕背景動(dòng)畫

第三種按鈕背景動(dòng)畫中，使用花點(diǎn)漸變作為按鈕的背景圖像。在鼠標(biāo)滑過(guò)按鈕時(shí)，通過(guò)修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成點(diǎn)運(yùn)動(dòng)效果。

第四種按鈕背景動(dòng)畫

第四種按鈕背景動(dòng)畫中，使用波浪變作為按鈕的背景圖像。在鼠標(biāo)滑過(guò)按鈕時(shí)，通過(guò)修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成波浪動(dòng)態(tài)運(yùn)動(dòng)效果。

第五種按鈕背景動(dòng)畫

第五種按鈕背景動(dòng)畫中，使用斜線變作為按鈕的背景圖像。在鼠標(biāo)滑過(guò)按鈕時(shí)，通過(guò)修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成斜線運(yùn)動(dòng)效果。

第六種按鈕背景動(dòng)畫

第六種按鈕背景動(dòng)畫中，使用圓形閃動(dòng)漸變作為按鈕的背景圖像。在鼠標(biāo)滑過(guò)按鈕時(shí)，通過(guò)修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成圓形閃動(dòng)效果。

6種樣式設(shè)置好了,我們?cè)賮?lái)看看HTML里面具體結(jié)構(gòu)是怎么樣的.

2. HTML結(jié)構(gòu)

該按鈕效果使用標(biāo)準(zhǔn)的組件來(lái)制作。

這樣我們就完成了,現(xiàn)在我們?cè)倏匆幌滤撵o態(tài)圖.

3. 與iOS交互實(shí)現(xiàn)

代碼如下:

效果圖如下：