上個(gè)月，我們收集了不少來自國內(nèi)外的HTML5相關(guān)資源和jQuery插件，其中包括很多經(jīng)典帥酷的HTML5動(dòng)畫應(yīng)用，有些還利用了Canvas和SVG的相關(guān)特性，從而讓HTML5動(dòng)畫更加具有強(qiáng)烈的視覺效果。本文總結(jié)了上個(gè)月的最新HTML5動(dòng)畫應(yīng)用，希望大家會(huì)喜歡。

1、HTML5人物跑步動(dòng)畫

記得之前給大家分享過一款HTML5人物行走動(dòng)畫，效果非常震撼。今天要介紹的HTML5動(dòng)畫更加炫酷，是一款基于HTML5的人物跑步動(dòng)畫特效，在這款人物跑步動(dòng)畫中你可以點(diǎn)擊按鈕來切換人物手中拿的武器，效果非常逼真。

2、純CSS3實(shí)現(xiàn)眨眼動(dòng)畫 超逼真

我們在不久前分享過很多純CSS3實(shí)現(xiàn)的人物和動(dòng)物動(dòng)畫，每一款動(dòng)畫的效果都非常不錯(cuò)。今天我們要分享一個(gè)純CSS3實(shí)現(xiàn)的眨眼動(dòng)畫，其動(dòng)畫效果超級(jí)逼真，拿它來做動(dòng)畫人物的眼睛非常適合，這款CSS3眨眼動(dòng)畫完全用CSS3繪制，并沒有使用圖片。

3、HTML5 3D立方體圖片切換動(dòng)畫

今天我們要來分享一款HTML5圖片切換動(dòng)畫，該HTML5動(dòng)畫主要是將圖片分成幾個(gè)塊，切換時(shí)每一個(gè)塊都會(huì)以3D立方體的形式過度下一張圖片，立方體的打散和聚合動(dòng)畫都非常酷，你可以在JS文件中配置圖片的路徑和切換的數(shù)量，相當(dāng)靈活。

4、CSS3簡易清新的下拉菜單

對(duì)于CSS3菜單我們已經(jīng)在以前分享過很多了，有華麗的動(dòng)畫菜單，也有沖擊視覺的3D菜單，今天要介紹的是一款簡易而實(shí)用的下拉菜單，綠色的主題風(fēng)格，讓菜單的外觀看上去非常清新，下拉菜單的顏色和主菜單的顏色搭配也非常不錯(cuò)。

5、HTML5/jQuery迷人音樂播放器jPlayer

今天我們要來分享一款非常精巧的jQuery音樂播放器插件jPlayer，這款jQuery音樂播放器的外觀非常迷人，可以自定義漂亮的播放器背景圖片，而且播放器需要的功能它都齊全，更完美的是，這款jQuery音樂播放器還支持分享至社交網(wǎng)站。

6、HTML5自定義背景圖片的文字特效

在HTML5和CSS3標(biāo)準(zhǔn)出來之前，文字的背景只能是純色，更不用說是自定義背景圖片了。然而，強(qiáng)大的HTML5不僅讓文字背景支持漸變顏色，而且支持自定義的背景圖片，這些圖片就像遮罩層，讓文字的背景變得豐富多彩。

臺(tái)ID：WEB_wysj(點(diǎn)擊關(guān)注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（微信回復(fù)HTML5，獲取全套源碼）

● ● ●

HTML5標(biāo)準(zhǔn)已經(jīng)塵埃落定，未來的Web將會(huì)是由HTML5主導(dǎo)，當(dāng)然作為開發(fā)者對(duì)這一喜訊更為動(dòng)心。本文主要分享了15個(gè)無比華麗的HTML5/CSS3動(dòng)畫應(yīng)用，供大家參考學(xué)習(xí)。

1、HTML5/CSS3圖片選擇動(dòng)畫 可選擇多張圖片

今天我們來分享一款既炫酷又實(shí)用的HTML5圖片選擇特效，當(dāng)圖片被選中時(shí)，圖片上就會(huì)覆蓋一個(gè)半透明的層，上面有一個(gè)勾，并且在選中的時(shí)候圖片出現(xiàn)彈跳的動(dòng)畫效果。

2、純CSS3實(shí)現(xiàn)圖片復(fù)古效果 鼠標(biāo)滑過切換

今天我們要分享一款非常酷的圖片效果，這個(gè)效果在很多P圖軟件中經(jīng)常可以看到，就是對(duì)一張圖片進(jìn)行復(fù)古效果的渲染。這款CSS3圖片效果就實(shí)現(xiàn)了這個(gè)復(fù)古的特效，我們只要將鼠標(biāo)滑過圖片，就可以實(shí)現(xiàn)這一圖片復(fù)古效果了。

3、CSS3華麗的Tab菜單 帶小圖標(biāo)動(dòng)畫

之前我們分享過一款非常出色的CSS3 Tab菜單HTML5 SVG Tab滑塊菜單，結(jié)合SVG，Tab菜單實(shí)現(xiàn)非常靈活。今天我們要再來分享一款基于CSS3的華麗Tab菜單，這款Tab菜單的菜單項(xiàng)是一個(gè)個(gè)小圖標(biāo)，鼠標(biāo)滑過時(shí)，菜單項(xiàng)展示對(duì)應(yīng)文字，并出現(xiàn)展開的動(dòng)畫。

4、HTML5/CSS3書本翻頁3D動(dòng)畫

前段時(shí)間我們分享過很多牛叉的HTML5動(dòng)畫，如果你對(duì)HTML5感興趣，可以移步至HTML5動(dòng)畫欣賞學(xué)習(xí)。今天我們要分享一款基于HTML5和CSS3的書本翻頁3D動(dòng)畫，當(dāng)我們將鼠標(biāo)滑過書本時(shí)，書本就會(huì)自動(dòng)一頁頁翻過去，書本的3D效果非常不錯(cuò)。

5、HTML5 3D骨牌圖片特效 帶文字描述

今天分享一款很特別的HTML5 3D圖片特效，當(dāng)鼠標(biāo)滑過圖片時(shí)，平面的圖片即會(huì)呈現(xiàn)3D的效果，和這款HTML5 3D圖片折疊特效類似，也是通過鼠標(biāo)滑過來展現(xiàn)3D效果。另外，這款HTML5 3D骨牌圖片特效還可以設(shè)置圖片描述信息。

6、jQuery UI滑桿插件 可Tooltip提示

今天我們再來介紹一款實(shí)用的jQuery插件，是基于jQuery UI的。這款jQuery滑桿插件非常漂亮，可以設(shè)置多種顏色，再加上CSS3上運(yùn)用，可以讓滑桿的游標(biāo)變得有立體感，滑桿的Tooltip提示框也出現(xiàn)飛入飛出的動(dòng)畫效果。更多jQuery插件可以移步至jQuery插件欄目。

7、CSS3個(gè)人資料表單 分兩步驟表單

對(duì)于分步驟表單，我們之前也已經(jīng)有過介紹了，像這款HTML5分步驟注冊表單就非常不錯(cuò)，今天我們要來介紹另外一款分步驟表單，這是一款個(gè)人資料填寫表單，我們可以分兩步來填寫個(gè)人資料，每一步的切換都有淡入淡出的動(dòng)畫效果，你也可以回退到上一步繼續(xù)填寫。

8、HTML5/CSS3仿Facebook登錄表單

利用CSS3制作的登錄表單的確很漂亮，我們在html5tricks網(wǎng)站上也分享過幾款了，比如CSS3密碼強(qiáng)度驗(yàn)證表單可以顯示密碼的強(qiáng)度，這款純CSS3發(fā)光登錄表單更是絢麗多彩。今天我們要分享一款仿Facebook的登錄表單，無論從外觀還是功能上說，這款登錄表單還是挺接近Facebook登錄表單的。

9、HTML5/CSS3超酷進(jìn)度條 不同進(jìn)度多種顏色

這是一款線條狀的CSS3進(jìn)度條，這款進(jìn)度條有兩個(gè)特點(diǎn)：一是隨著進(jìn)度條的進(jìn)度更新，都會(huì)有數(shù)字百分比實(shí)時(shí)顯示，讓數(shù)據(jù)更加直觀；二是在不同的進(jìn)度階段，進(jìn)度條的顏色會(huì)有所變化，這樣能更好的反應(yīng)當(dāng)前的進(jìn)度狀態(tài)。加上黑色的背景，讓這款CSS3進(jìn)度條更加鮮亮起來。

10、CSS3 3D發(fā)光切換按鈕 模擬效果很逼真

剛剛我們發(fā)布過一款CSS3開關(guān)切換滑動(dòng)按鈕，應(yīng)該說出了有點(diǎn)3D立體的效果外，其他都很普通。現(xiàn)在我們要來分享一款更酷的CSS3開關(guān)切換按鈕，它不僅具有3D的效果，而且可以發(fā)光，當(dāng)開關(guān)處于打開狀態(tài)時(shí)，旁邊的小燈就會(huì)亮起來，然后燈光投射到開關(guān)上，效果挺逼真的。

11、HTML5線性圖表 圖表數(shù)據(jù)區(qū)域可著色

利用HTML5制作圖表插件也比較常見，我們也收集過幾款很實(shí)用的HTML5圖表插件，它們確實(shí)可以幫助我們在網(wǎng)頁上直觀地展示數(shù)據(jù)。今天我們要再來分享一款實(shí)用的HTML5線性圖表插件，這款線性圖表可以在不同的數(shù)據(jù)區(qū)域內(nèi)繪制不同的顏色，讓每一個(gè)數(shù)據(jù)區(qū)域都非常明顯可見。

12、HTML5柱狀圖表 可合并多張圖表的數(shù)據(jù)

之前我們分享過好幾款不錯(cuò)的HTML5柱狀圖表了，像這款HTML5/CSS3水平柱狀圖表，非常簡單實(shí)用的圖表。今天我們要再來分享一款HTML5柱狀圖表，這款圖表插件可以將多張圖表的數(shù)據(jù)合并成一張圖表顯示，在圖表數(shù)據(jù)合并過程中產(chǎn)生融入的動(dòng)畫，挺不錯(cuò)的。

13、HTML5/CSS3提示框Tooltip動(dòng)畫

之前我們已經(jīng)分享過一款HTML5/CSS3分步提示框Tooltip ，不過這款提示框主要是用來分步操作提示的，不是真正的Tooltip。今天我們要分享一款利用CSS3實(shí)現(xiàn)的提示框Tooltip動(dòng)畫。當(dāng)鼠標(biāo)移到圖標(biāo)按鈕上時(shí)，就會(huì)在按鈕正上方彈出一個(gè)Tooltip提示框，并且伴有淡入淡出的效果。

14、HTML5/CSS3滑塊動(dòng)畫菜單 圖標(biāo)動(dòng)畫很酷

CSS3菜單我們之前已經(jīng)分享很多了，有3D菜單、下拉菜單、Tab菜單等，具體大家可以移步至CSS3菜單欄目下查找。今天我們要分享的這款HTML5/CSS3滑塊動(dòng)畫菜單非常酷，鼠標(biāo)滑過菜單項(xiàng)時(shí)會(huì)有一個(gè)漂亮的遮罩移動(dòng)過來，并且這款動(dòng)畫菜單還有非常酷的圖標(biāo)，菜單整體效果很大氣。

15、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布

HTML5 Canvas還有一個(gè)比較實(shí)用的應(yīng)用，那就是網(wǎng)絡(luò)畫板，這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能，我們可以自定義筆刷的類型、粗細(xì)、顏色，也可以定義畫布的大小和背景顏色等。我們也可以對(duì)這款HTML5畫圖工具進(jìn)行擴(kuò)展，讓它的畫圖功能更加完善。

干貨！免費(fèi)領(lǐng)取騰訊高級(jí)講師網(wǎng)頁設(shè)計(jì)教程

點(diǎn)我領(lǐng)取

點(diǎn)擊下方“閱讀原文”結(jié)交更多有才華的設(shè)計(jì)師！

↓↓↓

TML 5已經(jīng)成為Web開發(fā)者當(dāng)中最流行的語言之一，“健壯的”語言有很大的生產(chǎn)優(yōu)質(zhì)萬維網(wǎng)內(nèi)容的能力。HTML 5在近三年的增長迅猛，新引入HTML 5的技術(shù)更加的優(yōu)秀。HTML 5技術(shù)被現(xiàn)代瀏覽器所支持，如Chrome、Firefox、Internet Explorer等等。而今天，我們將為您推薦十個(gè)HTML 5動(dòng)畫工具，希望對(duì)您的工作有所幫助。

Mixeek是一款免費(fèi)的軟件工具，可用于設(shè)計(jì)和交互Web動(dòng)畫。該工具基于JavaScript、CSS和HTML 5。Mixeek是輕量級(jí)的、易于使用的，可替代付費(fèi)動(dòng)畫工具。

Animatron是一款直觀的設(shè)計(jì)與發(fā)布編輯軟件。你可以使用Animatron來設(shè)計(jì)內(nèi)容，如橫幅、信息圖表和創(chuàng)意動(dòng)畫（針對(duì)桌面電腦、移動(dòng)設(shè)備以及任何你可以選擇的設(shè)備）。

你可以使用Tumult Hype來創(chuàng)建美麗的HTML 5 Web內(nèi)容。用其創(chuàng)建的內(nèi)容是交互的并擁有偉大的動(dòng)畫功能。你可以在桌面、智能手機(jī)和iPad上使用這個(gè)框架，它不需要你有編碼知識(shí)。

Mugeda是許多創(chuàng)作工具包、廣告商和代理處的首選，來釋放他們的創(chuàng)造力并創(chuàng)建最優(yōu)質(zhì)的媒體廣告單元。該工具最知名的是它創(chuàng)建優(yōu)質(zhì)廣告單元、橫幅、插頁式廣告、可擴(kuò)展和迷你游戲的能力。

HTML5 Maker常用于構(gòu)建滑塊、橫幅以及用最小的努力創(chuàng)建令人印象深刻的圖形。這個(gè)工具是免費(fèi)的，它不要求你有任何特別的編程知識(shí)。

Hippo Studios是一個(gè)很好的平臺(tái)，可以創(chuàng)建強(qiáng)大的動(dòng)畫、游戲、演示文稿、應(yīng)用和多媒體網(wǎng)站。使用Hippo Studios創(chuàng)建的項(xiàng)目被大多數(shù)瀏覽器和設(shè)備支持。

Sencha Space是一個(gè)針對(duì)基于HTML和JavaScript應(yīng)用的安全應(yīng)用環(huán)境。該工具幫助組織簡化了應(yīng)用的開發(fā)、安全、維護(hù)以及部署到桌面、平板和智能手機(jī)。Sencha最出名的地方是它的安全性。

blysk是一款非常有用的動(dòng)畫工具。它為動(dòng)畫和Web設(shè)計(jì)提供了一個(gè)很好的平臺(tái)，可以為網(wǎng)站和其他互聯(lián)網(wǎng)項(xiàng)目構(gòu)建直觀的動(dòng)畫。

Radiapp是一款強(qiáng)大的工具，常用于創(chuàng)建運(yùn)行時(shí)的視頻和圖形。它為現(xiàn)代網(wǎng)站提供實(shí)時(shí)的圖形編輯界面。

Createjs是一個(gè)與HTML 5 Canvas元素工作的JavaScript庫。最出名的地方是創(chuàng)建游戲、衍生藝術(shù)以及其他的圖形工具。它為我們提供了偉大的圖形經(jīng)驗(yàn)。（編譯：陳明）

原文來自：hidimba360