HTML5确實非常強大(dà)，很(hěn)多(du≠γō)時(shí)候我們可(kě)以利用(yòng)HTML5中的(de)新技"≥(jì)術(shù)實現(xiàn)非常炫酷的(de)粒子(zǐ)動畫(huà₽≈✔)效果，粒子(zǐ)動畫(huà)在HTML5應用•ε(yòng)中也(yě)是(shì)比較消耗本地(dì)資源的(de)，尤其是♥φ(shì)CPU，但(dàn)是(shì)有∞π←(yǒu)些(xiē)HTML5粒子(zǐ)效©" ✘果确實能(néng)給用(yòng)戶帶來(lái)不(bù)一(yī)樣的(σ&de)驚豔用(yòng)戶體(tǐ)驗。本文(wén)就(jiù)是(s®♣∞hì)要(yào)分(fēn)享8款效果驚豔的(de)HTML5粒'₽子(zǐ)動畫(huà)特效，希望你(nǐ)可(kě)以喜歡。

 1、HTML5 Canvas粒子(zǐ)模拟效果

    &α₹←nbsp;  這(zhè)是(shì)一(yī)款π≈β利用(yòng)HTML5 Canvas模拟出來(lái)的(de€♥®±)30000個(gè)粒子(zǐ)動畫(huà)，當你(nǐ)用(yòng≥≤π)鼠标在canvas畫(huà)布上(shàng)移動時(¥​shí)，鼠标周圍的(de)一(yī)些(xiē)粒子(zǐ)就(jiù)±•會(huì)跟著(zhe)你(nǐ)移動§♠，并形成一(yī)定的(de)圖案，就(jiù)像你(nǐ)在玩(wán)沙∏₩↔∏畫(huà)一(yī)樣，效果非常不(bù)錯(cuò​$‌)。這(zhè)裡(lǐ)，我們應用(yòng)了(le)一(yī)些(xiλ♦±ē)HTML5的(de)特性，讓這(zhè)個(→✔gè)粒子(zǐ)動畫(huà)顯得(de)相(xiàπ £™ng)當動感。

2、HTML5 Canvas生(shēng)成粒子(zǐ)效果的(de)人(÷₽εrén)物(wù)頭像

    &nb≥>sp;  HTML5處理(lǐ)圖片真¶✘∞§的(de)非常簡單。今天我們要(yào)再利用(yòng)HTML5 Ca↕© nvas實現(xiàn)一(yī)個(gè)粒子(zǐ)效果的(de)人(ré✔↕​∑n)物(wù)頭像，你(nǐ)可(kě)以任₹>意選擇一(yī)張頭像圖片，接下(xià)來(lái)該圖片"α↑Ω會(huì)被打散成許多(duō)粒子(zǐ)，然後慢(màn)慢(màn∏₩)的(de)重組成圖片，鼠标滑過圖片時(shí)粒子(zǐ)還(hái)會(•♠δβhuì)出現(xiàn)浮動的(de)動畫(huà)特效，↔€看(kàn)上(shàng)去(qù)非常酷。

3、HTML5 Canvas實現(xiàn)會(huì)®♣↕跳(tiào)舞(wǔ)的(de)時(shí)間(jiān)動≤±‍♦畫(huà)

   &n♦®•★bsp;    這(‌®zhè)是(shì)一(yī)款很(hěn)有(yǒu)意思的(d'δe)HTML5 Canvas時(shí)間(jiān)動畫(huà∞©π₽)，總體(tǐ)來(lái)說(shuō)© ，它是(shì)一(yī)個(gè)可(kě)以和(hé)客戶端同步的(de♠​™→)時(shí)鐘(zhōng)，其特點是(sh★εì)當時(shí)間(jiān)走動時(shíδ←)，數(shù)字将會(huì)散落成一(yī)個₹€↓(gè)個(gè)粒子(zǐ)動畫(huà)，比如(σ✔☆↓rú)這(zhè)個(gè)HTML5粒子(zǐ)文(wén)字特效。

4、HTML5 Canvas粒子(zǐ)效果文(wén)字動畫(huà)特效

    &n∏©★bsp;   之前我們分(fēn)享過很(h•×♣&ěn)多(duō)超酷的(de)文(wén)字特效，其中也(yě)有(yǒ♣∑₹‌u)利用(yòng)HTML5和(hé)CSS3的(de)。今•♠λ±天我們要(yào)來(lái)分(fēn×δ$™)享一(yī)款基于HTML5 Canvas的(de)文(wén)字特效，←$輸入框中輸入想要(yào)展示的(de)文(wén)字，回車(ch↔€↕​ē)後即可(kě)在canvas上(shàng)繪制(zhì)出±Ω粒子(zǐ)效果的(de)文(wén)字動畫(huà)，×♥₹相(xiàng)當酷的(de)動畫(huà)效果。

5、HTML5火(huǒ)焰文(wén)字特效

     &♥↓&nbsp; 之前我們分(fēn)享過不(bù)少(∞£shǎo)基于HTML5和(hé)CSS3的(de)文(w±"∑♠én)字特效，有(yǒu)3D的(de)文(wén)字效&§★果，也(yě)有(yǒu)動畫(huà)文$"¶(wén)字特效。今天我們分(fēn)享的(de)這(zhè&↔​≠)款HTML5文(wén)字特效是(shì)火(huǒ↕‍↕↑)焰燃燒的(de)效果，比較消耗CPU，但(dàn)是(shì)動​↑ε畫(huà)效果還(hái)是(shì)比較酷的(dλ∏£‍e)。另外(wài)，再推薦一(yī)款HTML5文(wé★♥ ÷n)字特效：HTML5像素文(wén)字爆炸重組動畫(<☆≠≈huà)特效。

6、HTML5/CSS3粒子(zǐ)效果©♥÷÷進度條 超炫酷進度條動畫(huà)

    &ε✘nbsp;  之前我已經分(fēn)享了(l​‌‍≈e)幾款效果很(hěn)不(bù)錯(cuò)的(§↓≤de)CSS3進度條插件(jiàn)，比如(rú)CSS3 Load≈™≈ing進度條加載動畫(huà)特效、CSS3 3D進↓β度條按鈕 18款精美(měi)樣式。今天我再來↓←(lái)分(fēn)享一(yī)款很(hěn)有(yǒu)特色的(de)φ$HTML5/CSS3進度條應用(yòng)。♦ 這(zhè)款進度條插件(jiàn)在播放(f←£àng)進度過程中出現(xiàn)粒子(zǐ)↕≥效果，就(jiù)像一(yī)些(xiē)小(xiǎo)顆粒從(c¥♠≈ óng)進度條上(shàng)散落下(xià)來(lái)，是(sh¥♥>ì)一(yī)款别具特色的(de)HTML5進度條插件(jiàn)。

7、HTML5粒子(zǐ)效果的(de)文(wén)字動畫(huα à)特效

      記得>↓♠(de)之前向大(dà)家(jiā)分(fēn)享過一(y↔‌ī)款HTML5 Canvas實現(xiàn)會(huì)跳★ε‌(tiào)舞(wǔ)的(de)時(shí)間(j™"‍iān)動畫(huà)，利用(yòng)了(le)HTML5的(de)©↕≤₹粒子(zǐ)動畫(huà)特性。今天要(yào)分(fēn)享的(de)也(y♥&ě)是(shì)一(yī)款基于HTML5的(de)粒子(zǐ)$₹效果的(de)文(wén)字動畫(huà)特效↑↓✘，并且它可(kě)以實現(xiàn)每個(gè)文(wén)字的(d ‍ e)逐幀播放(fàng)，形成一(yī)句很(hěn)浪漫的(de∑∑↔)詩句。

8、HTML5 Canvas 3D 倒計(jì)時(s♦₽±hí)爆炸特效

     &≤‍♥€nbsp; 今天要(yào)分(fēn)享的(↔₹<de)這(zhè)款 HTML5 3D ε↑♥動畫(huà)特效非常給力，它是(shì)一(yφ∏±ī)個(gè)基于Canvas 的(de)倒計(jì)時(shí)爆炸效果§π，随著(zhe)時(shí)間(jiān)的(de)走動 ↔§，時(shí)間(jiān)數(shù)字傍♣↓♣✘邊就(jiù)會(huì)有(yǒu)爆炸的γ®>(de)特效，一(yī)群像素點就(jiù)會(huì)在數(s‌¥"hù)字中心爆發出來(lái)，感覺非常酷。而且應用(yòng)了(le) H§₹ ↑TML5 的(de) 3D 特性，讓整一(yī)個(gè)時("αγ₹shí)鐘(zhōng)顯得(de)非常有(yǒu)立體(Ω♣♦tǐ)感。

      &nb∞♣sp;以上(shàng)就(jiù)是(shì)8款驚豔的(de)HTMφ→→βL5粒子(zǐ)動畫(huà)特效，歡迎分(fēn)享收藏。€βπδ