前端之美：9個很酷的基於 CSS3 和 JavaScript 實現的效果

　　這篇文章向大家分享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

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