【特別推薦】小夥伴們驚呆了！8個超炫的 Web 效果

　　CodePen 是一個在線的 HTML、CSS 和 JavaScript 代碼編輯器，可以編寫代碼並即時預覽效果。你在上面能夠在線展現本身的做品，也能夠看到其餘人在網頁中實現的各類使人驚奇的效果。
　　今天這篇文章就爲你們挑選出8個超炫的 Web 效果演示，這些 Demo 能夠說都是藝術品，讓小夥伴們都驚呆了！（爲保證最佳的效果，請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽）
您可能感興趣的相關文章
使用 CSS3 實現超炫的 Loading 動畫效果
精選12款優秀 jQuery Ajax 分頁插件和教程
你可能沒用過的10款代碼編輯器，喜歡哪一個？
推薦25款很棒的 HTML5 開發框架和開發工具
14個支持響應式設計的流行前端開發框架推薦

  
Light Loader 閃亮的進度條效果。我喜歡粒子演示做品，特別是那些可以應用於實際的，例如這個由 Jack Rugile 編寫的進度條效果。看着這麼炫的效果，即便讓我多等一會也無妨：）

Whale 跟隨鼠標移動的鯨魚。你會好奇這個效果是怎樣作出來的，事實上它只是一些簡單的形狀相互疊加，並且會跟着鼠標移動。

Avgrund 立體彈窗效果。這個做品的做者是 Hakim，他在 CodePen 上面有不少不少的好做品，很難選擇出最好的一個。我挑選這個的緣由是由於這個效果很實用。模態窗口配合深度的視覺效果讓整個界面特別有立體感。

Tearable Cloth 這是一個流暢的模擬可撕裂布料效果的演示。你會看到，藉助 Canvas 的強大繪圖和動畫功能，只需不多的代碼就能實現讓您屏息凝神的效果。我相信這是 CodePen 最受歡迎的做品了，超過150萬的瀏覽量。讓人驚歎的交互，重力和搖曳的感受——足以以假亂真。

Ribbon 動感的絲帶效果，做者是 Justin Windle。當你看到如此平滑的效果的時候，能夠想象將來的 Web 平臺有不少的驚喜使人期待。

Mechanical Grass 機械草效果，做者是 Tim Holman。看着這個做品，我彷彿置身與一個遠離世俗的地，好比蒸汽朋克的做品《愛麗絲夢遊仙境》。

Twitter Button Concept Twitter 立體按鈕效果，相似翻蓋的動做。藉助 CSS3 技術，能夠創造出各類很酷的視覺效果。

Triangle Optical Illusion 三角形視覺效果，做者是 Ana Tudor，她擅長教學方面的編程，經過視覺演示自己來解釋一些理論。這是我最喜歡的一個有趣的例子。

 
您可能感興趣的相關文章
9個難以想象的 HTML5 Canvas 應用試驗
35個讓人驚訝的 CSS3 動畫效果演示
10大流行 Metro UI 風格 Bootstrap 主題
推薦35款精緻的 CSS3 和 HTML5 網頁模板
OverAPI.com – 開發人員在線速查手冊

 

原文連接：Chris Coyier’s Favorite CodePen Demos
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
轉載於猿2048:➬《【特別推薦】小夥伴們驚呆了！8個超炫的 Web 效果》