7個(gè)華麗的基于Canvas的HTML5動(dòng)畫(huà)

起HTML5，可能讓你印象更深的是其基于Canvas的動(dòng)畫(huà)特效，雖然Canvas在HTML5中的應(yīng)用并不全都是動(dòng)畫(huà)制作，但其動(dòng)畫(huà)效果確實(shí)讓人震驚。本文收集了7個(gè)最讓人難忘的HTML5 Canvas動(dòng)畫(huà)，包括畫(huà)板、文字、圖表等，希望你會(huì)喜歡。

1、HTML5 Canvas畫(huà)板畫(huà)圖工具可定義筆刷和畫(huà)布

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

在線演示源碼下載

2、HTML5 Canvas瀑布動(dòng)畫(huà) 超逼真

這次我們來(lái)分享一款很酷的HTML5 Canvas瀑布動(dòng)畫(huà)，瀑布動(dòng)畫(huà)非常逼真。整個(gè)瀑布動(dòng)畫(huà)像是從石頭縫里流出來(lái)的溪水，然后沿著懸崖飛落下來(lái)，效果非常不錯(cuò)。

在線演示源碼下載

3、HTML5 Canvas可拖動(dòng)的彈性大樹(shù)搖擺動(dòng)畫(huà)

今天讓我們繼續(xù)來(lái)分享一個(gè)炫酷的HTML5動(dòng)畫(huà)，它是一款基于HTML5 Canvas的大樹(shù)搖擺動(dòng)畫(huà)，這款HTML5動(dòng)畫(huà)的特點(diǎn)是我們可以拖拽樹(shù)枝，從而讓整棵樹(shù)搖擺起來(lái)，這樣就真實(shí)地模擬了大樹(shù)從搖擺到靜止的整個(gè)過(guò)程，相當(dāng)逼真。

在線演示源碼下載

4、HTML5統(tǒng)計(jì)圖表數(shù)據(jù)初始動(dòng)畫(huà)

之前我們已經(jīng)向大家分享很多HTML5圖表了，比如這款HTML5 Canvas折線圖表和柱形圖表就比較經(jīng)典。今天要介紹的也是一款HTML5圖表，該統(tǒng)計(jì)圖表的特點(diǎn)是圖表數(shù)據(jù)在初始化的時(shí)候會(huì)出現(xiàn)很酷的動(dòng)畫(huà)特效，特別是環(huán)形百分比應(yīng)用還會(huì)出現(xiàn)百分比數(shù)的動(dòng)態(tài)更新。

在線演示源碼下載

5、HTML5 Canvas花朵生成器可生成多種樣式的花朵

HTML5非常流行，利用HTML5制作動(dòng)畫(huà)也非常方便，今天要分享一款利用HTML5 Canvas制作的花朵生成器，我們只需要在Canvas畫(huà)布上點(diǎn)擊鼠標(biāo)，即可動(dòng)態(tài)生成各種顏色樣式的花朵，并且每一朵花都可以緩慢地旋轉(zhuǎn)，非常炫酷。

在線演示源碼下載

6、HTML5 Canvas繪制灰太狼超級(jí)可愛(ài)

HTML5 Canvas相當(dāng)于一個(gè)畫(huà)板，你可以在Canvas繪制任意的東西，今天要分享一款利用HTML5 Canvas繪制的灰太狼形象，個(gè)人以為，這個(gè)灰太狼繪制得十分逼真形象，小伙伴們都要驚呆了。以后我們?cè)賮?lái)弄一個(gè)HTML5 Canvas的喜洋洋如何？

在線演示源碼下載

7、HTML5動(dòng)感的火焰燃燒動(dòng)畫(huà)特效

這又是一款基于HTML5的超炫動(dòng)畫(huà)特效，是一款動(dòng)感的火焰燃燒動(dòng)畫(huà)效果。這款HTML5動(dòng)畫(huà)火焰燃燒非常逼真，之前我們也分享過(guò)一些其他的HTML5火焰燃燒動(dòng)畫(huà)，比如：HTML5 Canvas火焰燃燒動(dòng)畫(huà)和純CSS3實(shí)現(xiàn)打火機(jī)火焰動(dòng)畫(huà)。一般像這樣的HTML5動(dòng)畫(huà)都是基于Canvas的，今天的這款也不例外。

在線演示源碼下載

以上就是7個(gè)華麗的基于Canvas的HTML5動(dòng)畫(huà)，希望對(duì)你有所幫助。

用說(shuō)， Flash的效果大家都清楚。實(shí)際上，HTML5和JavaScript擁有很多新屬性，可以用它們來(lái)替代Flash。W3Cschool精選16個(gè)超牛逼的HTML5和JavaScript特效，看了這些特效，未來(lái)的Web發(fā)展前途無(wú)量。

1.特效：FlowerPower

創(chuàng)作者使用花朵作為畫(huà)刷，以貝茲曲線方式繪圖。

2.特效：Breathing Galaxies

動(dòng)態(tài)變換直徑及顏色，可通過(guò)鼠標(biāo)或鍵盤(pán)產(chǎn)生新形狀，這個(gè)效果不錯(cuò)!

3.特效：Noise Field

移動(dòng)鼠標(biāo)可改變粒子運(yùn)動(dòng)，點(diǎn)擊可隨機(jī)生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字動(dòng)畫(huà)特效

W3Cschool利用HTML5，制造出了粒子效果文字動(dòng)畫(huà)特效。只要你輸入框中輸入想要展示的文字，回車后即可在canvas上繪制出粒子效果的文字動(dòng)畫(huà)，相當(dāng)酷的動(dòng)畫(huà)效果。

5.特效：Swirling Tentacles

三維脈沖效果，沿著脈沖線有運(yùn)動(dòng)的顏色漸變模塊。

6.特效：Keylight

雙擊生成兩個(gè)以后的鍵即可發(fā)出聲音，移動(dòng)鍵的位置可產(chǎn)生不同的聲音效果。W3Cschool上面有很多這樣的教程，有興趣可以去看一下！

7.特效：Rotating Spiral

旋轉(zhuǎn)的螺旋效果，單擊可以控制開(kāi)始和停止旋轉(zhuǎn)，是不是覺(jué)得高大上？

8.Blob

拖動(dòng)水滴有重力效果，雙擊可以分離，小水滴碰到大水滴會(huì)合并。

9.Trail

彩色顆粒跟隨鼠標(biāo)運(yùn)動(dòng)效果，帶尾巴淡出效果。

10.Graph Layout

一種交互的力向圖布局效果，刷新三觀。

11.Typographic Effects

使用HTML5 Canvas實(shí)現(xiàn)的文本特性，效果超過(guò)Flash。

12.Crazy Tentacles

移動(dòng)鼠標(biāo)可以進(jìn)行涂鴉，點(diǎn)擊鼠標(biāo)可以清除畫(huà)布，看著確實(shí)瘋狂。

13.Nebula

吸引眼球的粒子系統(tǒng)，目的是測(cè)試WebGL性能，如果滑動(dòng)鼠標(biāo)，可以產(chǎn)生絢麗效果。

14.WebGL Globe

WebGL Globe 是一個(gè)開(kāi)放的地理數(shù)據(jù)可視化平臺(tái)，我們鼓勵(lì)你復(fù)制代碼，添加自己的數(shù)據(jù)，創(chuàng)建自己的應(yīng)用。

15.Particle Playground

用鼠標(biāo)和粒子進(jìn)行交互，能發(fā)現(xiàn)不一樣的精彩。

16.Surface

使用WebGL實(shí)現(xiàn)的水面特效實(shí)驗(yàn)，可放入一張照片，使用鼠標(biāo)觸動(dòng)水面會(huì)有奇特效果。

上面的HTML5和JavaScript特效，簡(jiǎn)直趕超F(xiàn)lash。W3Cschool上面有很多用戶留言稱HTML5和JavaScriptit將替代Flash，不過(guò)對(duì)于這種說(shuō)法，也不知道怎么去評(píng)判。畢竟這些用戶說(shuō)的也是很有道理，你認(rèn)為JavaScriptit會(huì)替代Flash嗎?很想知道你的答案!

公眾號(hào)：w3c技術(shù)教程

提供專業(yè)的web技術(shù)教程、手冊(cè)、工具。

網(wǎng)頁(yè)設(shè)計(jì)工作中，我們可以給很多元素添加發(fā)光的動(dòng)畫(huà)效果，舉幾個(gè)例子，“輸入框”、“文字”、“進(jìn)度條”等。給這些元素加上的發(fā)光特效會(huì)讓整個(gè)網(wǎng)頁(yè)變得更加炫酷。今天陜西優(yōu)就業(yè)小編就為大家搜集整理了8款炫酷的HTML發(fā)光動(dòng)畫(huà)，這些都可以用作Web前端開(kāi)發(fā)工作中，可以為你節(jié)省很多開(kāi)發(fā)時(shí)間。

1.HTML5 Canvas五彩繽紛的3D發(fā)光水晶球動(dòng)畫(huà)

這是一款基于HTML5 Canvas的超絢麗發(fā)光水晶球動(dòng)畫(huà)，就像是酒吧里的那種水晶球射燈一樣，不停地隨機(jī)變換射出光線的顏色，給人一種非常動(dòng)感的視覺(jué)效果。整個(gè)水晶球是在Canvas畫(huà)布上繪制而成，利用CSS3的相關(guān)特性使其能夠出現(xiàn)五彩繽紛的發(fā)光動(dòng)畫(huà)，而且可以通過(guò)鼠標(biāo)滾輪來(lái)放大縮小這個(gè)水晶球，不得不說(shuō)HTML5真的是非常強(qiáng)大。

2.jQuery/CSS3實(shí)現(xiàn)漂亮字體發(fā)光特效

今天我們要來(lái)分享一款很酷的jQuery/CSS3文字發(fā)光特效，首先是加載了谷歌的公共字體庫(kù)，因此字體非常特別和漂亮，另外利用了jQuery和CSS3的相關(guān)特性，當(dāng)鼠標(biāo)滑過(guò)文字時(shí)，文字將會(huì)出現(xiàn)發(fā)光的動(dòng)畫(huà)特效，非常漂亮。

3.超絢麗CSS3多色彩發(fā)光立方體旋轉(zhuǎn)動(dòng)畫(huà)

之前我們分享過(guò)幾個(gè)不錯(cuò)的CSS3立方體動(dòng)畫(huà)，比如這款HTML5 3D立方體旋轉(zhuǎn)動(dòng)畫(huà)和HTML5 3D立方體圖片切換動(dòng)畫(huà)。今天要分享的也是一款基于CSS3的3D立方體旋轉(zhuǎn)動(dòng)畫(huà)，不同的是，這款立方體的每一個(gè)面都有不同的色彩，并且會(huì)帶有絢麗的發(fā)光特效。

4.純CSS3實(shí)現(xiàn)發(fā)光開(kāi)關(guān)切換按鈕

前段時(shí)間我們向大家分享過(guò)一款牛奶般剔透的CSS3 3D開(kāi)關(guān)按鈕，效果相當(dāng)贊。今天我們要來(lái)分享一款類似的純CSS3發(fā)光開(kāi)關(guān)切換按鈕，它的外觀就像一個(gè)電燈的開(kāi)關(guān)，可以左右切換。另外開(kāi)關(guān)上的文字還有發(fā)光的特效，整體看上去很有立體感。

5.純CSS3和SVG鼠標(biāo)滑過(guò)燈泡發(fā)光特效

這次要分享一款利用純CSS3和SVG實(shí)現(xiàn)的燈泡發(fā)光效果，我們只需要將鼠標(biāo)滑過(guò)燈泡，整個(gè)燈泡就會(huì)出現(xiàn)發(fā)光發(fā)亮的動(dòng)畫(huà)特效，效果相當(dāng)逼真。CSS3的運(yùn)用，讓燈泡外圍有一層淡淡的光暈。并且在燈光點(diǎn)亮和熄滅的時(shí)候有淡入淡出的效果。

6.HTML5 Canvas發(fā)光Loading動(dòng)畫(huà)

之前我們分享過(guò)很多基于CSS3的Loading動(dòng)畫(huà)效果，相信大家都很喜歡。今天我們要來(lái)分享一款基于HTML5 Canvas的發(fā)光Loading加載動(dòng)畫(huà)特效。Loading旋轉(zhuǎn)圖標(biāo)是在canvas畫(huà)布上繪制的，整個(gè)loading動(dòng)畫(huà)是發(fā)光3D的視覺(jué)效果，HTML5非常強(qiáng)大。

7.CSS3發(fā)光Loading加載動(dòng)畫(huà)

今天我們要分享一款與眾不同的CSS3 Loading動(dòng)畫(huà)效果，它是由幾個(gè)不同的動(dòng)畫(huà)效果組合而成的，像文字打印效果、發(fā)光效果、飛入飛出效果，這幾種效果都非常酷。另外我們可以再回顧一下其他的CSS3 Loading效果：HTML5 Canvas實(shí)現(xiàn)超酷Loading動(dòng)畫(huà)、很有個(gè)性的CSS3彈跳Loading動(dòng)畫(huà)。

8.純CSS3實(shí)現(xiàn)發(fā)光動(dòng)畫(huà)按鈕特效

這是一款基于純CSS3的發(fā)光按鈕，按鈕發(fā)光的顏色是隨機(jī)的，這樣一排按鈕就顯得五彩繽紛，非常絢麗。之前我們也介紹過(guò)不少樣式很獨(dú)特的CSS3按鈕，比如純CSS3 3D開(kāi)關(guān)按鈕、純CSS3實(shí)現(xiàn)動(dòng)感彈性按鈕等，都非常不錯(cuò)，也有HTML5動(dòng)畫(huà)按鈕，大家可以自己看看。

陜西優(yōu)就業(yè)：http://www.ujiuye.com/shaanxi/

IT學(xué)習(xí)交流：468910291

在線咨詢

上一篇：CSS 按鈕
下一篇：把Ubuntu Server從英文切換到中文語(yǔ)言環(huán)境

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

7個(gè)華麗的基于Canvas的HTML5動(dòng)畫(huà)

您的項(xiàng)目需求