精選9個值得學習的 HTML5 效果 精選9個值得學習的 HTML5 效果【附源碼】

此文轉自：http://www.cnblogs.com/lhb25/p/9-html5-effects.html，僅供本人學習參考，版權歸原做者全部！

精選9個值得學習的 HTML5 效果【附源碼】

 

　　這裏精選了一組很酷的 HTML5 效果。HTML5 是現 Web 開發領域的熱點， 擁有不少讓人期待已久的新特性，特別是在移動端，Web 開發人員能夠藉助 HTML5 強大功能輕鬆製做各類交互性強、效果豐富的Web 應用。

超炫 HTML5 粒子效果進度條

　　我喜歡粒子效果做品，特別是那些可以應用於實際的，例如這個由 Jack Rugile 基於 HTML5 Cavnas 編寫的進度條效果。看着這麼炫的 Loading 效果，即便讓我多等一會也無妨：）

源碼下載      在線演示

 

HTML5 Canvas 模擬可撕裂布料效果

　　這是一個模擬可撕裂布料效果的 HTML5 Canvas 應用演示，效果逼真。你會看到，藉助 Canvas 的強大繪圖和動畫功能，只需不多的代碼就能實現讓您屏息凝神的效果。

源碼下載      在線演示

 

SVG 實現一個漂亮的頁面預加載效果

　　展現如何使用 CSS 動畫， SVG 和 JavaScript 建立一個簡單的頁面預加載效果。對於網站來講，這些預載入得畫面提供了一種創造性的方法，使用戶在等待內容加載的時候不會那麼無聊。

源碼下載      在線演示

 

結合 CSS3 & Canvas 模擬人行走的效果

　　HTML5 和 CSS3 技術給 Web 帶來了新的利器，點燃了 Web 開發人員的激情。所謂只有想不到，沒有作不到，的確如此。下面給你們分享一個結合 CSS3 & Canvas 模擬人行走的動畫效果。

源碼下載      在線演示

 

HTML5 高仿逼真 3D 布料圖案效果

　　HTML5 規範引進了不少新特性，其中最使人期待的之一就是 Canvas 元素，HTML5 Canvas 提供了經過 JavaScript 繪製圖形的方法，很是強大。下面給你們分享一個 HTML5 Canvas 繪製的 3D 布料圖案效果。

源碼下載      在線演示

 

HTML5 模擬現實物理效果

　　Ball Pool 是一個基於 HTML5 技術的實驗，模擬現實物理效果，讓你在 Web 中感覺天然物體的運動。玩法介紹：能夠隨意拖動圓球、點擊頁面背景、晃動瀏覽器、雙擊頁面背景或者按住鼠標左鍵，有不一樣的效果，趕忙來體驗一下。

 

源碼下載     在線演示

 

HTML5 WebGL 實現逼真的雲朵效果

　　使用 HTML5 WebGL 實現超逼真的雲朵效果。WebGL 是一項在網頁瀏覽器呈現3D畫面的技術，有別於過去須要安裝瀏覽器插件，經過 WebGL 的技術，只須要編寫網頁代碼便可實現3D圖像的展現。

源碼下載      在線演示

HTML5 製做瘋狂的觸手 

 　　這個示例叫瘋狂的觸手，移動鼠標能夠進行塗鴉，點擊鼠標能夠清除畫布。

源碼下載      在線演示

 

WebGL 實現的水面特效實驗

　　使用 WebGL 實現的水面特效實驗，可放入一張照片，使用鼠標觸動水面會有奇特效果。

源碼下載      在線演示