前言

大家都知道，如今移動互聯網時代已經來臨，HTML5的出現，更是讓移動互聯網火的發紫，很多朋友甚至選擇報HTML5開發培訓班都要擠進這個移動互聯網時代，由此可以看出，HTML5重度精品將要來臨。

今天來給大家介紹一下HTML5，講什么呢?講講如何巧用HTML5設計按鈕背景不同動畫特效，在該特效中，當鼠標滑過按鈕時，使用CSS3 animation來動畫background-size和background-position屬性，來實現各種背景動畫效果。

下面來看一下整體的效果圖：

看了動畫效果之后大家應該非常關心他是如何實現的,現在就給大家具體講講他的實現技巧.

具體實現

1. CSS樣式

首先為按鈕設置通用樣式。將按鈕的背景去除，設置2像素的實線邊框，并將底部邊框設置為4個像素。通過padding來設置按鈕的尺寸，并為按鈕的文字顏色設置平滑動畫過渡效果。

第一種按鈕背景動畫

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

第二種按鈕背景動畫

第二種按鈕背景動畫中，使用線性漸變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發生變化，形成斑馬線運動效果。

第三種按鈕背景動畫

第三種按鈕背景動畫中，使用花點漸變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發生變化，形成點運動效果。

第四種按鈕背景動畫

第四種按鈕背景動畫中，使用波浪變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發生變化，形成波浪動態運動效果。

第五種按鈕背景動畫

第五種按鈕背景動畫中，使用斜線變作為按鈕的背景圖像。在鼠標滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發生變化，形成斜線運動效果。

第六種按鈕背景動畫

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

6種樣式設置好了,我們再來看看HTML里面具體結構是怎么樣的.

2. HTML結構

該按鈕效果使用標準的組件來制作。

這樣我們就完成了,現在我們再看一下他的靜態圖.

3. 與iOS交互實現

代碼如下:

效果圖如下：