1.jQuery右側(cè)Tab選項(xiàng)卡的焦點(diǎn)圖插件

這是一款基于jQuery的焦點(diǎn)圖插件，和之前介紹的jQuery焦點(diǎn)圖插件類似，它以淡入淡出的動(dòng)畫方式來(lái)切換圖片，該焦點(diǎn)圖插件的特點(diǎn)是右側(cè)有一排Tab選項(xiàng)卡，點(diǎn)擊相應(yīng)選項(xiàng)卡后即可切換對(duì)應(yīng)的圖片，應(yīng)該說(shuō)這款jQuery焦點(diǎn)圖插件還是非常實(shí)用的。

2.超炫 HTML5 粒子效果進(jìn)度條

我喜歡粒子效果作品，特別是那些能夠應(yīng)用于實(shí)際的，例如這個(gè)由 Jack Rugile 基于 HTML5 Cavnas 編寫的進(jìn)度條效果?？粗@么炫的 Loading 效果，即使讓我多等一會(huì)也無(wú)妨：

3.HTML5 Canvas 模擬可撕裂布料效果

這是一個(gè)模擬可撕裂布料效果的 HTML5 Canvas 應(yīng)用演示，效果逼真。你會(huì)看到，借助 Canvas 的強(qiáng)大繪圖和動(dòng)畫功能，只需很少的代碼就能實(shí)現(xiàn)讓您屏息凝神的效果。

4.SVG 實(shí)現(xiàn)一個(gè)漂亮的頁(yè)面預(yù)加載效果

展示如何使用 CSS 動(dòng)畫， SVG 和 JavaScript 創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面預(yù)加載效果。對(duì)于網(wǎng)站來(lái)說(shuō)，這些預(yù)載入得畫面提供了一種創(chuàng)造性的方法，使用戶在等待內(nèi)容加載的時(shí)候不會(huì)那么無(wú)聊。

5.HTML5 制作瘋狂的觸手

這個(gè)示例叫瘋狂的觸手，移動(dòng)鼠標(biāo)可以進(jìn)行涂鴉，點(diǎn)擊鼠標(biāo)可以清除畫布。

6.WebGL 實(shí)現(xiàn)的水面特效實(shí)驗(yàn)

使用 WebGL 實(shí)現(xiàn)的水面特效實(shí)驗(yàn)，可放入一張照片，使用鼠標(biāo)觸動(dòng)水面會(huì)有奇特效果。

7.使用 CSS3 Transforms 構(gòu)建圓形導(dǎo)航

在本教程中我將告訴你如何使用 CSS 變換來(lái)創(chuàng)建圓形導(dǎo)航。教程逐一講解實(shí)現(xiàn)這個(gè)樣式將要涉及一些基本的數(shù)學(xué)知識(shí)并配合 CSS 變換來(lái)創(chuàng)建這些樣式。不過(guò)不用擔(dān)心，這里用到的數(shù)學(xué)知識(shí)真的是很簡(jiǎn)單的。教程使用淺顯易懂的語(yǔ)言來(lái)介紹數(shù)學(xué)邏輯，讓你能夠清晰的理解背后的技術(shù)。

8.Popline：帥氣的浮動(dòng) HTML5 文本編輯器工具欄

Popline 是一個(gè)基于 HTML5 實(shí)現(xiàn)的富文本編輯器工具欄，設(shè)計(jì)靈感來(lái)自 PopClip ，相比傳統(tǒng)的文本編輯器工具，Popline 能夠浮動(dòng)在編輯的文本周圍，操作起來(lái)十分方便。

9.S Gallery – 很有特色的響應(yīng)式 jQuery 相冊(cè)插件

S Gallery 是一款響應(yīng)式的 jQuery 相冊(cè)插件。使用了 HTML5 全屏 API 以及 CSS3 動(dòng)畫 和 CSS3 轉(zhuǎn)換，所以只能在支持這些功能的瀏覽器中使用。這款插件它有一個(gè)特色功能：退出幻燈片模式回到網(wǎng)格視圖模式，最后一張活躍的圖片會(huì)以動(dòng)畫形式回到網(wǎng)格視圖中的初始位置，因此用戶知道他們?yōu)g覽到畫廊中的哪張圖片上。

10.MasonJS – 創(chuàng)建完美的砌體結(jié)構(gòu)網(wǎng)頁(yè)布局

MasonJS 插件用來(lái)解決目前大多數(shù)的網(wǎng)格系統(tǒng)使用中的問(wèn)題——間距。當(dāng)使用 Masonry，Isotope 或任何其他網(wǎng)格插件時(shí)，布局中會(huì)出現(xiàn)空白或邊緣參差不齊的情況。MasonJS 可以幫助你填補(bǔ)這些布局中的缺口。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。