#前言
今天來繼續給大家介紹一下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互動實現
**如下:
###效果圖
巧用HTML5給按鈕背景設計不同的動畫簡單例項
如何巧用html5設計按鈕背景不同動畫特效，在該特效中，當滑鼠滑過按鈕時，使用css3 animation 來動畫 background size 和 background position 屬性，來實現各種背景動畫效果。下面來看一下整體的效果圖 具體實現 1.css樣式 首先為按鈕設定通用樣式。將...
HTML5 動畫演示
01 02 htmllang en 03 head 04 metacharset utf 8 05 title animations in html5 using the canvas element 06 script 07 08 body 09 canvasid canvas width 100...
HTML5載入動畫
之前我們分享過很多基於css3的loading載入動畫，通過css3的高階特性，可以製作出形態各異的loading載入動畫元件。今天給大家帶來的這款loading載入動畫是基於html5 canvas的，在canvas畫布上，我們動態繪製許多多邊形，這些多邊形伴隨著顏色的隨機變化和旋轉，形成了奇幻色...