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

2020-03-24 17:31:18

字體：大中小

供稿：網(wǎng)友

如何巧用HTML5設(shè)計按鈕背景不同動畫特效，在該特效中，當(dāng)鼠標(biāo)滑過按鈕時，使用CSS3 animation來動畫 background-size和background-position屬性，來實現(xiàn)各種背景動畫效果。下面來看一下整體的效果圖：具體實現(xiàn)：1. html' target='_blank'>CSS樣式首先為按鈕設(shè)置通用樣式。將按鈕的背景去除，設(shè)置2像素的實線邊框，并將底部邊框設(shè)置為4個像素。通過padding來設(shè)置按鈕的尺寸，并為按鈕的文字顏色設(shè)置平滑動畫過渡效果。第一種按鈕背景動畫：在第一種按鈕背景動畫中，按鈕的背景使用2個漸變圖層來制作。當(dāng)鼠標(biāo)滑過按鈕時執(zhí)行halftone幀動畫，該動畫修改按鈕的background-size屬性。它縮小了背景圖片的尺寸，使所有的圓點連成一片。第二種按鈕背景動畫：第二種按鈕背景動畫中，使用線性漸變作為按鈕的背景圖像。在鼠標(biāo)滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成斑馬線運動效果。第三種按鈕背景動畫：第三種按鈕背景動畫中，使用花點漸變作為按鈕的背景圖像。在鼠標(biāo)滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成點運動效果。第四種按鈕背景動畫：第四種按鈕背景動畫中，使用波浪變作為按鈕的背景圖像。在鼠標(biāo)滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成波浪動態(tài)運動效果。第五種按鈕背景動畫：第五種按鈕背景動畫中，使用斜線變作為按鈕的背景圖像。在鼠標(biāo)滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成斜線運動效果。第六種按鈕背景動畫：第六種按鈕背景動畫中，使用圓形閃動漸變作為按鈕的背景圖像。在鼠標(biāo)滑過按鈕時，通過修改按鈕的background-position屬性，使背景位置不斷發(fā)生變化，形成圓形閃動效果。這就是六個按鈕的每個效果和代碼，除了這個css樣式還可以使用一些標(biāo)準(zhǔn)的組件來制作。以上這篇巧用HTML5給按鈕背景設(shè)計不同的動畫簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持phpstudy。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：常用HTML meta 標(biāo)簽屬性(網(wǎng)站兼容與優(yōu)化需要)

下一篇：HTML5 canvas實現(xiàn)雪花飄落特效