如何巧用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屬性，使背景位置不斷發生變化，形成圓形閃動效果。
這就是六個按鈕的每個效果和**，除了這個css樣式還可以使用一些標準的元件來製作。
本文標題: 巧用html5給按鈕背景設計不同的動畫簡單例項
本文位址: /web/html5/10310.html
HTML5之按鈕背景不同動畫特效設計
前言 今天來繼續給大家介紹一下html5,講什麼呢,講講一組效果非常酷的滑鼠滑過按鈕背景動畫特效,在該特效中，當滑鼠滑過按鈕時，使用css3 animation來動畫background size和background position屬性，來實現各種背景動畫效果。下面來看一下整體的效果圖 看了動畫...
HTML5框架 背景和實體
html5框架 html5背景 html5實體 html框架 框架標籤 frame 框架對於頁面的設計有著很大的作用 框架集標籤 框架集標籤定義如何將視窗分割為框架 每乙個frameset定義一系列行或列 rows cols的值規定了每行或每列佔據螢幕的面積 常用標籤 noresize 固定框架大小...
html5 繪製類似牆型的背景
最近開發的專案中要使用html5繪製各種虛線包括貝塞爾虛線 圓形虛線 各種虛線段，還包括各種形式的背景牆，截圖如下 這中背景圖有一定的規律，首先應該繪製乙個矩形，填充色為藍色，然後在矩形上面繪製背景牆。背景牆的繪製步驟如下 1 繪製橫線 2 繪製豎線 3 進行描邊 上述三個步驟中不叫麻煩的是繪製豎線...