CodePen 是一個在線的 HTML、CSS 和 JavaScript 代碼編輯器，能夠編寫代碼并即時預(yù)覽效果。你在上面可以在線展示自己的作品，也可以看到其他人在網(wǎng)頁中實(shí)現(xiàn)的各種令人驚奇的效果。今天這篇文章就為大家挑選出8個超炫的 Web 效果演示，這些 Demo 可以說都是藝術(shù)品，讓小伙伴們都驚呆了！

　　CodePen 是一個在線的 HTML、CSS 和 JavaScript 代碼編輯器，能夠編寫代碼并即時預(yù)覽效果。你在上面可以在線展示自己的作品，也可以看到其他人在網(wǎng)頁中實(shí)現(xiàn)的各種令人驚奇的效果。

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

  

Light Loader

閃亮的進(jìn)度條效果。我喜歡粒子演示作品，特別是那些能夠應(yīng)用于實(shí)際的，例如這個由 Jack Rugile 編寫的進(jìn)度條效果。看著這么炫的效果，即使讓我多等一會也無妨：）

Whale

跟隨鼠標(biāo)移動的鯨魚。你會好奇這個效果是怎樣做出來的，事實(shí)上它只是一些簡單的形狀相互疊加，而且會跟著鼠標(biāo)移動。

Avgrund

立體彈窗效果。這個作品的作者是 Hakim，他在 CodePen 上面有很多很多的好作品，很難選擇出最好的一個。我挑選這個的原因是因?yàn)檫@個效果很實(shí)用。模態(tài)窗口配合深度的視覺效果讓整個界面特別有立體感。

Tearable Cloth

這是一個流暢的模擬可撕裂布料效果的演示。你會看到，借助 Canvas 的強(qiáng)大繪圖和動畫功能，只需很少的代碼就能實(shí)現(xiàn)讓您屏息凝神的效果。我相信這是 CodePen 最受歡迎的作品了，超過150萬的瀏覽量。讓人驚嘆的交互，重力和搖曳的感覺——足以以假亂真。

Ribbon

動感的絲帶效果，作者是 Justin Windle。當(dāng)你看到如此平滑的效果的時候，可以想象未來的 Web 平臺有很多的驚喜令人期待。

Mechanical Grass

機(jī)械草效果，作者是 Tim Holman。看著這個作品，我仿佛置身與一個遠(yuǎn)離世俗的地，比如蒸汽朋克的作品《愛麗絲夢游仙境》。

Twitter Button Concept

Twitter 立體按鈕效果，類似翻蓋的動作。借助 CSS3 技術(shù)，可以創(chuàng)造出各種很酷的視覺效果。

Triangle Optical Illusion

三角形視覺效果，作者是 Ana Tudor，她擅長教學(xué)方面的編程，通過視覺演示本身來解釋一些理論。這是我最喜歡的一個有趣的例子。

 

原文鏈接：Chris Coyier’s Favorite CodePen Demos

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計資源