8個前沿的 HTML5 & CSS3 效果【附源碼下載】

作為一個前沿的 Web 開發者，對于 HTML5 和 CSS3 技術或多或少都有掌握。前幾年這些新技術剛萌芽的時候，開發者們已經使用它們來小試牛刀了，如今這些先進技術已經遍地開發，特別是在移動端大顯身手。這篇文章挑選了8個前沿的 HTML5 & CSS3 效果，記得收藏哦：）

　　作為一個前沿的 Web 開發者，對于 HTML5 和 CSS3 技術或多或少都有掌握。前幾年這些新技術剛萌芽的時候，開發者們已經使用它們來小試牛刀了，如今這些先進技術已經遍地開發，特別是在移動端大顯身手。這篇文章挑選了8個前沿的 HTML5 & CSS3 效果，記得收藏哦：）

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

HTML5 模擬現實物理效果

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

源碼下載在線演示

實現各種 CSS3 文本動畫效果

這個插件集成了一些非常好的 JavaScript 庫，提供一個方便使用的文本動畫插件，可以讓你為網頁中的文字運用各種動畫。

在線演示源碼下載

離開你網站時顯示模態彈窗

Ouibounce 是一個微小的庫，用于實現在用戶離開你的網站的時候顯示一個模式窗口。這個庫可以幫助你增加著陸頁的轉換率。 Ouibounce 會在當鼠標光標移動到接近（或通過）視口（viewport）的頂部的時候觸發。

源碼下載在線演示

實現各種好看的陰影效果

Shine.js 是一個用于實現漂亮陰影的 JavaScript 庫。您可以設置動態光的位置，可定制的陰影。不依賴于第三方庫，兼容 AMD。能在支持 textShadow 或 boxShadow 的瀏覽器中正常使用，如果有需要會自動添加前綴。

源碼下載在線演示

表單填寫進度提示效果

Fort.js 是一款用于時尚、現代的表單填寫進度提示效果的 JavaScript 庫，你需要做的就是添加表單，剩下的任務就交給 Fort.js 算法了，使用非常簡單。提供了Default、Gradient、Sections 以及 Flash 四種效果，滿足開發的各種場合需要。

源碼下載在線演示

HTML5 WebGL 實現逼真的云朵效果

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

源碼下載在線演示

帶有數字顯示的加載進度條效果

有的時候，在我們的應用程序中，我們希望能夠顯示特定任務的百分比進度。這里分享的這款小巧的 JavaScript 插件就是實現這個功能，易于使用和定制，而且是是免費開源的。

立即下載在線演示

自適應的占位符效果

在早期，我們都是通過使用 JavaScript 來實現占位符功能。而現在，HTML5 原生提供的 placeholder 屬性讓我們在現代瀏覽器輕松就能實現這樣的功能。這里向大家分享一個自適應的占位符效果（Adaptive Placeholder），當你輸入的時候，提示文字不會消失，而是以動畫的方式移動到了輸入框的上方。