這篇文章向大家分享9個很酷的挑選自 DemoStudio 的 CSS3 和 JavaScript 實現的精美效果。DemoStudio 是 Mozilla Developer Network（MDN）用于展示一些非常優秀的 CSS3 和 JavaScript 效果的網站，Google 也有一個 Chrome Experiment，用于展示最新的 Web 技術應用。相信下面展示的這些效果會給你留下非常深刻的印象，讓你體會到Web的美妙！

　　這篇文章向大家分享9個很酷的挑選自 DemoStudio 的 CSS3 和 JavaScript 實現的精美效果。DemoStudio 是 Mozilla Developer Network（MDN）用于展示一些非常優秀的 CSS3 和 JavaScript 效果的網站，Google 也有一個 Chrome Experiment，用于展示最新的 Web 技術應用。相信下面展示的這些效果會給你留下非常深刻的印象，讓你體會到Web的美妙！

 

3D Image transition

艷麗的圖片，可以和 Flash 媲美的 3D CSS3 Transition 效果。

 

Paperfold

讓人眼前一亮的折紙效果，可拖動控制選項變換各種效果。

 

RotorJS

基于 JavaScript 實現的一個輕量、可擴展的3D旋轉控制庫。 

 

The Box

使用硬紙片制作的動態的 3D 場景，使用可回收材料制作。

 

3D Flip list menu

帶翻轉效果的二級導航菜單，鼠標懸浮即可看到效果。

 

CSS3 Reflection effect

使用 CSS3 實現的倒影效果，驚嘆吧！

 

Animated Menu Icons

使用純 CSS3 實現的微型，可伸縮的動畫效果。

 

Animated CSS3 Gallery

基于 CSS3 的相冊，帶有旋轉和漸顯縮放效果。

 

The CSS Book

使用 CSS 實現的 3D 書本效果，拖動鼠標試用一下吧。

  

您可能還喜歡

 

• 分享5個有趣的 JavaScript 代碼片段
• JavaScript 初學者應注意的七個細節
• 分享15款很棒的 JavaScript 開發工具
• 推薦19個非常有用的 JavaScript 庫
• 8個驚艷的JavaScript WebGL 應用實驗

 

英文鏈接：9 Awesome CSS3 And Javascript Effects

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