精選9個(gè)值得學(xué)習(xí)的 HTML5 效果【附源碼】
這里精選了一組很酷的 HTML5 效果。HTML5 是現(xiàn) Web 開(kāi)發(fā)領(lǐng)域的熱點(diǎn)， 擁有很多讓人期待已久的新特性，特別是在移動(dòng)端，Web 開(kāi)發(fā)人員可以借助 HTML5 強(qiáng)大功能輕松制作各種交互性強(qiáng)、效果豐富的Web 應(yīng)用。
超炫 HTML5 粒子效果進(jìn)度條
我喜歡粒子效果作品，特別是那些能夠應(yīng)用于實(shí)際的，例如這個(gè)由 Jack Rugile 基于 HTML5 Cavnas 編寫(xiě)的進(jìn)度條效果?？粗@么炫的 Loading 效果，即使讓我多等一會(huì)也無(wú)妨：）
HTML5 Canvas 模擬可撕裂布料效果
這是一個(gè)模擬可撕裂布料效果的 HTML5 Canvas 應(yīng)用演示，效果逼真。你會(huì)看到，借助 Canvas 的強(qiáng)大繪圖和動(dòng)畫(huà)功能，只需很少的代碼就能實(shí)現(xiàn)讓您屏息凝神的效果。
SVG 實(shí)現(xiàn)一個(gè)漂亮的頁(yè)面預(yù)加載效果
展示如何使用 CSS 動(dòng)畫(huà)， SVG 和 JavaScript 創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面預(yù)加載效果。對(duì)于網(wǎng)站來(lái)說(shuō)，這些預(yù)載入得畫(huà)面提供了一種創(chuàng)造性的方法，使用戶(hù)在等待內(nèi)容加載的時(shí)候不會(huì)那么無(wú)聊。
結(jié)合 CSS3 & Canvas 模擬人行走的效果
HTML5 和 CSS3 技術(shù)給 Web 帶來(lái)了新的利器，點(diǎn)燃了 Web 開(kāi)發(fā)人員的激情。所謂只有想不到，沒(méi)有做不到，的確如此。下面給大家分享一個(gè)結(jié)合 CSS3 & Canvas 模擬人行走的動(dòng)畫(huà)效果。
HTML5 高仿逼真 3D 布料圖案效果
HTML5 規(guī)范引進(jìn)了很多新特性，其中最令人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了通過(guò) JavaScript 繪制圖形的方法，非常強(qiáng)大。下面給大家分享一個(gè) HTML5 Canvas 繪制的 3D 布料圖案效果。
HTML5 模擬現(xiàn)實(shí)物理效果
Ball Pool 是一個(gè)基于 HTML5 技術(shù)的實(shí)驗(yàn)，模擬現(xiàn)實(shí)物理效果，讓你在 Web 中感受自然物體的運(yùn)動(dòng)。玩法介紹：可以隨意拖動(dòng)圓球、點(diǎn)擊頁(yè)面背景、晃動(dòng)瀏覽器、雙擊頁(yè)面背景或者按住鼠標(biāo)左鍵，有不同的效果，趕緊來(lái)體驗(yàn)一下。
HTML5 WebGL 實(shí)現(xiàn)逼真的云朵效果
使用 HTML5 WebGL 實(shí)現(xiàn)超逼真的云朵效果。WebGL 是一項(xiàng)在網(wǎng)頁(yè)瀏覽器呈現(xiàn)3D畫(huà)面的技術(shù)，有別于過(guò)去需要安裝瀏覽器插件，通過(guò) WebGL 的技術(shù)，只需要編寫(xiě)網(wǎng)頁(yè)代碼即可實(shí)現(xiàn)3D圖像的展示。
HTML5 制作瘋狂的觸手
這個(gè)示例叫瘋狂的觸手，移動(dòng)鼠標(biāo)可以進(jìn)行涂鴉，點(diǎn)擊鼠標(biāo)可以清除畫(huà)布。
WebGL 實(shí)現(xiàn)的水面特效實(shí)驗(yàn)
使用 WebGL 實(shí)現(xiàn)的水面特效實(shí)驗(yàn)，可放入一張照片，使用鼠標(biāo)觸動(dòng)水面會(huì)有奇特效果。
