巧用HTML5給按鈕背景設(shè)計(jì)不同的動(dòng)畫簡單實(shí)例

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

下面來看一下團(tuán)體的結(jié)果圖：

詳細(xì)實(shí)現(xiàn)：

1. CSS樣式

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

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

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

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

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

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

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

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

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

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

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

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

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

這就是六個(gè)按鈕的每個(gè)結(jié)果和代碼，除了這個(gè)css樣式還可以使用一些標(biāo)準(zhǔn)的組件來制作。

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