前言
HTML5一個相當出色的web技術，它不僅可以讓你更加方便地操縱頁面元素，而且可以通過canvas實現更多的動畫特效，引進HTML5標準後，CSS3也就可以發揮更大的作用。本文主要介紹了一些基於HTML5 Canvas的動畫特效，分享給大家，希望大家喜歡。
其實做為一個前端開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的前端交流群：330336289，邀請編號：寂靜。不管你是小白還是大牛歡迎入駐，大家一起交流學習，繼續學習
1、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布
HTML5 Canvas還有一個比較實用的應用，那就是網路畫板，這樣我們就可以在網頁上直接進行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實現網路畫圖的功能，我們可以自定義筆刷的型別、粗細、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進行擴充套件，讓它的畫圖功能更加完善。·
2、HTML5 Canvas頭髮飄逸動畫 很酷的HTML5動畫
HTML5 Canvas動畫非常炫酷，很多有創意的開發者可以利用HTML5的Canvas特性創造出很多不錯的動畫特效。今天我們要分享一款HTML5 Canvas頭髮飄逸動畫，該動畫模擬頭髮飄動的效果，加上可愛的人臉，可以說非常有技術含量，更富有創意。·
3、HTML5/CSS3帶日期區間的日期選擇外掛
一款實用的HTML5/CSS3日期選擇外掛，這款日期選擇外掛的外觀還是挺清新簡易的，但是整體來說還是挺漂亮的。另外，該日期選擇外掛還有一個最大的特點，那就是可以自定義日期的區間，我們可以快速的制定區間範圍內的日期，非常方便。·
4、HTML5小車動畫 很酷的HTML5吉普車
很多HTML5動畫都是利用CSS3的一些特性和Canvas特性來完成，比如HTML5/CSS3實現蝙蝠俠人物動畫就利用CSS3的動畫特性，HTML5 Canvas模擬衣服撕扯動畫就利用了HTML5 Canvas特性。今天我們要分享一款利用HTML5/CSS3實現的吉普車動畫，小車可以水平滾動，非常逼真。·
5、HTML5/CSS3滑塊動畫選單 圖示動畫很酷
CSS3選單有3D選單、下拉選單、Tab選單等，具體大家可以移步至CSS3選單欄目下查詢。今天我們要分享的這款HTML5/CSS3滑塊動畫選單非常酷，滑鼠滑過選單項時會有一個漂亮的遮罩移動過來，並且這款動畫選單還有非常酷的圖示，選單整體效果很大氣。·
6、HTML5/CSS3 3D文字特效 文字外翻效果
一款很酷的HTML5/CSS3 3D文字特效，該文字特效的效果是滑鼠滑過文字就會出現3D外翻的效果，非常不錯的一款文字特效。
7、CSS3波浪形選單 結合背景超級絢麗
這款CSS3選單有點特別，選單的整體形狀類似波浪形，滑鼠滑過選單項時也會改變背景色表示該選單項被啟用。另外該CSS3選單結合不錯的背景圖片效果更加震撼。
8、HTML5/CSS3時尚的圓盤時鐘動畫 帶當前日期
我們可以利用HTML5和CSS3來實現一些鐘錶動畫特效，效果都還不錯。一款利用HTML5和CSS3的圓盤時鐘動畫，時鐘外觀非常時尚。更重要的功能是，該HTML5時鐘動畫還帶有當前的日期，這是很多時鐘所沒有的功能。·
9、CSS3漂亮的自定義checkbox核取方塊 9款迷人樣式
CSS3自定義checkbox核取方塊純CSS3美化Checkbox和Radiobox按鈕，外觀非常時尚。下面是9款樣式迷人的CSS3漂亮的自定義Checkbox核取方塊。這幾款核取方塊樣式很豐富，使用起來也比較方便。·
10、HTML5/CSS3發光搜尋表單 超酷CSS3表單
純CSS3實現的發光登入表單，發光特效非常不錯。下圖是一款CSS3發光搜尋表單，表單整體是黑色的風格，搜尋框被啟用時，輸入框就會發光，由於黑色的背景，整個搜尋表單就顯得格外絢麗光亮。·
11、HTML5自定義Checkbox和Radiobox 很酷的選中動畫
瀏覽器自帶的Checkbox和Radiobox的樣式不僅外觀醜陋，而且控制起來也不方便，特別是Checkbox在各個瀏覽器中的樣式都不同，今天我們來利用HTML5和CSS3技術來自定義Checkbox和Radiobox的樣式，特別是Checkbox，在選中的時候還有非常酷的選中動畫。·
12、HTML5/CSS3自定義抖動表單 下拉表單很時尚
像這款HTML5/CSS3聯絡表單非常立體，純CSS3發光登入表單非常炫酷。今天我們要分享一款非常不錯的自定義抖動表單，有輸入框、下拉框、核取方塊和按鈕，這些表單元素都是通過CSS3渲染的，外觀非常不錯。初始化的時候這些表單元素還會有抖動動畫。·
13、HTML5愛心跳動動畫 用技術勾引妹子
在網站上，我們分享過一些浪漫程式設計師表白的HTML5動畫，像這款浪漫程式設計師 HTML5愛心表白動畫，相信不少女生看了都會心動。今天我們要分享一款利用HTML5的愛心跳動動畫，相對前一款，它要簡單一些，如果妹子開啟Email看到跳動的愛心，估計也能在心裡甜甜的一笑。·
14、HTML5紙帶翻轉動畫 超炫的3D特效
HTML5動畫雖然不是基於canvas的，它是基於jade和scss的，這款紙帶翻轉動畫非常不錯，翻轉時的3D特效也非常讓人驚歎，比較消耗CPU。
15、純CSS3垂直動畫選單 效果很酷
今天我們來分享一款CSS3垂直選單，這款垂直選單不僅有漂亮的小圖示，而且滑鼠滑過時還有非常酷的CSS3動畫，大家可以試試這款CSS3垂直選單。·
16、HTML5畫素文字爆炸重組動畫特效
HTML5可以把文字效果做得非常酷，就像之前分享的HTML5/CSS3發光文字和HTML5/CSS3文字投影特效就非常絢麗。今天我們要分享一款基於HTML5技術的文字畫素爆炸重組動畫特效，我們可以在輸入框中指定任意文字，點選確定按鈕後，就會將原先的文字爆炸散去，新的文字以畫素點的形式組合起來，看起來非常棒。
做為一個前端開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的前端交流群：330336289，邀請編號：寂靜。不管你是小白還是大牛歡迎入駐，大家一起交流學習，繼續學習
請把這篇文章分享給正在學習前端的朋友，希望該篇文章可以幫到一些小夥伴學到新的技巧。
最後祝所有程式設計師都能夠走上人生巔峰，讓程式碼將夢想照進現實，有不懂的問題可以隨時問我，工作不忙的時候希望可以給大家解惑。