8個前沿的 HTML5 & CSS3 效果（附源碼）

做爲一個前沿的 Web 開發者，對於 HTML5 和 CSS3 技術或多或少都有掌握。前幾年這些新技術剛萌芽的時候，開發者們已經使用它們來小試牛刀了，現在這些先進技術已經遍地開發，特別是在移動端大顯身手。這篇文章挑選了8個前沿的 HTML5 & CSS3 效果，但願對你有所幫助。 

1.  HTML5 模擬現實物理效果 

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

源碼下載  /  在線演示 

2.  實現各類 CSS3 文本動畫效果 

這個插件集成了一些很是好的 JavaScript 庫，提供一個方便使用的文本動畫插件，可讓你爲網頁中的文字運用各類動畫。 

在線演示   源碼下載 

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

Ouibounce 是一個微小的庫，用於實如今用戶離開你的網站的時候顯示一個模式窗口。這個庫能夠幫助你增長着陸頁的轉換率。 Ouibounce 會在當鼠標光標移動到接近（或經過）視口（viewport）的頂部的時候觸發。 

源碼下載  /   在線演示 

4.  實現各類好看的陰影效果 

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

源碼下載  /   在線演示 

5.  表單填寫進度提示效果 

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

源碼下載  /   在線演示 

6.  HTML5 WebGL 實現逼真的雲朵效果 

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

源碼下載  /   在線演示 

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

有的時候，在咱們的應用程序中，咱們但願可以顯示特定任務的百分比進度。這裏分享的這款小巧的 JavaScript 插件就是實現這個功能，易於使用和定製，並且是是免費開源的。 

當即下載  /   在線演示 

8.  自適應的佔位符效果 

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

源碼下載  /   在線演示