SAY討論區

標題: 【特別推薦】小夥伴們驚呆了！8個超炫的 Web 效果 - 網站設計及開發 [打印本頁]

作者: 火爆強B 時間: 2014-1-23 13:25:30 標題: 【特別推薦】小夥伴們驚呆了！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

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
本文出處【http://www.cnblogs.com/lhb25/】

作者: 小妖怪 時間: 2014-1-23 16:02:01

鑒定完畢.!

作者: hopakngai 時間: 2014-1-23 16:10:21

哈哈,這麼多的人都回了,我敢不回嗎?趕快回一個,很好的,我喜歡

作者: tracy10quTE~~ 時間: 2014-1-23 16:13:11

今天再看下

作者: 切雞飯 時間: 2014-1-23 16:32:49

誰都不容易啊 ~~

作者: 小妖怪 時間: 2014-1-23 16:41:30

今天沒事來逛逛

作者: 鬼谷先生 時間: 2014-1-23 16:44:27

鑒定完畢.!

作者: tomato_alex 時間: 2014-1-23 16:45:57

人氣還要再提高

作者: tomato_alex 時間: 2014-1-23 16:48:53

頂的就是你

作者: ILOVEU5 時間: 2014-1-23 16:51:10

我的idea，被樓主嫖竊了！

作者: 24gold24 時間: 2014-1-23 16:55:55

哈哈，看的人少，回一下

作者: skykingdom 時間: 2014-1-23 16:56:08

看完了這麼強的文章，我想說點什麼，但是又不知道說什麼好，想來想去只想

作者: 段皇爺 時間: 2014-1-23 17:08:02

先回覆一下，閃人

作者: maverickhon 時間: 2014-1-23 17:22:25

我想要`~

作者: ng015856 時間: 2014-1-23 17:25:01

我是來收集資料滴...

作者: ILOVEU5 時間: 2014-1-23 17:27:53

尼伊達是各好論壇，以後天天來

作者: 砵仔糕 時間: 2014-1-23 17:29:47

我也來頂一下..

作者: Tung8887 時間: 2014-1-23 17:55:07

正好你開咯這樣的帖

作者: ~Muscle~ 時間: 2014-1-23 18:44:56

我又回復了

作者: 花家姐 時間: 2014-1-23 20:01:29

我幫你這一帖頂起來

作者: madbull_zxr750 時間: 2014-1-24 05:59:21

謝謝分享了!

作者: tn52003 時間: 2014-1-25 10:36:46

生為地球人，就是愛看帖

作者: 尊貴的基佬 時間: 2014-1-26 03:42:35

希望大家幫我把這個帖發給你身邊的人，謝謝！

作者: madbull_zxr750 時間: 2014-1-26 12:26:06

最有人氣的帖子

作者: juny0385 時間: 2014-1-27 08:18:47

好文大家看，看完要回覆

作者: Disy 時間: 2014-1-30 16:44:41

有一天醒來，我的電腦就看到尼伊達論壇了

作者: hillmen 時間: 2014-1-30 16:44:57

樓主福如東海，萬壽無疆！

作者: andykom28 時間: 2014-1-31 08:43:57

這是一個好論壇，應該要多多來

作者: Some1 時間: 2014-1-31 16:54:53

樓上的稍等啦

作者: 切雞飯 時間: 2014-1-31 22:40:35

這篇帖子，我還是第一次在這看到

作者: ng015856 時間: 2014-2-1 03:51:00

頂你一下，好貼要頂！

作者: Gopper 時間: 2014-2-1 08:41:44

尼伊達看起來是個不錯的站喔

作者: 花家姐 時間: 2014-2-1 17:38:36

呵呵高高實在是高~~~~

歡迎光臨 SAY討論區 (http://forum.go2tutor.com/)