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

　　CodePen 是一個線上的 HTML、CSS 和 JavaScript 程式碼編輯器，能夠編寫程式碼並即時預覽效果。你在上面可以線上展示自己的作品，也可以看到其他人在網頁中實現的各種令人驚奇的效果。

　　今天這篇文章就為大家挑選出8個超炫的 Web 效果演示，這些 Demo 可以說都是藝術品，讓小夥伴們都驚呆了！（為保證最佳的效果，請在 Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽）

  

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，她擅長教學方面的程式設計，通過視覺演示本身來解釋一些理論。這是我最喜歡的一個有趣的例子。

 

原文連結：Chris Coyier’s Favorite CodePen Demos

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源