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

標籤：blog   http   ar   os   使用   sp   java   strong   on   

這裡精選了一組很酷的 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 實現的水面特效實驗，可放入一張照片，使用滑鼠觸動水面會有奇特效果。

源碼下載      線上示範

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