10款web前端值得學習的 HTML5 效果附源碼

標籤：blog   http   io   ar   使用   sp   java   for   strong   

1.jQuery右側Tab選項卡的焦點圖外掛程式

這是一款基於jQuery的焦點圖外掛程式，和之前介紹的jQuery焦點圖外掛程式類似，它以淡入淡出的動畫方式來切換圖片，該焦點圖外掛程式的特點是右側有一排Tab選項卡，點擊相應選項卡後即可切換對應的圖片，應該說這款jQuery焦點圖外掛程式還是非常實用的。

線上示範

源碼下載

2.超炫 HTML5 粒子效果進度條

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

線上示範

源碼下載

3.HTML5 Canvas 類比可撕裂布料效果

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

線上示範

源碼下載

4.SVG 實現一個漂亮的頁面預先載入效果

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

線上示範

源碼下載

5.HTML5 製作瘋狂的觸手

這個樣本叫瘋狂的觸手，移動滑鼠可以進行塗鴉，點擊滑鼠可以清除畫布。

線上示範

源碼下載

6.WebGL 實現的水面特效實驗

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

線上示範

源碼下載

7.使用 CSS3 Transforms 構建圓形導航

在本教程中我將告訴你如何使用 CSS 變換來建立圓形導航。教程逐一講解實現這個樣式將要涉及一些基本的數學知識並配合 CSS 變換來建立這些樣式。不過不用擔心，這裡用到的數學知識真的是很簡單的。教程使用淺顯易懂的語言來介紹數學邏輯，讓你能夠清晰的理解背後的技術。

線上示範

源碼下載

8.Popline：帥氣的浮動 HTML5 文字編輯器工具列

Popline 是一個基於 HTML5 實現的富文字編輯器工具列，設計構想來自 PopClip ，相比傳統的文字編輯器工具，Popline 能夠浮動在編輯的文本周圍，操作起來十分方便。

線上示範

源碼下載

9.S Gallery – 很有特色的響應式 jQuery 相簿外掛程式

S Gallery 是一款響應式的 jQuery 相簿外掛程式。使用了 HTML5 全屏 API 以及 CSS3 動畫 和 CSS3 轉換，所以只能在支援這些功能的瀏覽器中使用。這款外掛程式它有一個特色功能：退出投影片模式回到網格視圖模式，最後一張活躍的圖片會以動畫形式回到網格視圖中的初始位置，因此使用者知道他們瀏覽到畫廊中的哪張圖片上。

線上示範

源碼下載

10.MasonJS – 建立完美的砌體結構網頁布局

MasonJS 外掛程式用來解決目前大多數的網格系統使用中的問題——間距。當使用 Masonry，Isotope 或任何其他網格外掛程式時，布局中會出現空白或邊緣參差不齊的情況。MasonJS 可以協助你填補這些布局中的缺口。

線上示範

源碼下載

10款web前端值得學習的 HTML5 效果附源碼