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

---

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

HTML5 模擬現實物理效果

BallPool 是一個基於 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屬性讓我們在現代瀏覽器輕鬆就能實現這樣的功能。這裡向大家分享一個自適應的佔位符效果（AdaptivePlaceholder），當你輸入的時候，提示文字不會消失，而是以動畫的方式移動到了輸入框的上方。

 

原始碼下載   線上演示