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 可以幫助你填補這些布局中的缺口。

總結

以上是生活随笔為你收集整理的html5效果源码,10款web前端值得学习的 HTML5 效果附源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。