這篇文章收集了7個非常絢麗的 CSS3 效果應用演示，這些示例演示了 CSS3 各種新特性的強大能力。隨著越來越多的瀏覽器對 CSS3 支持的不斷完善，設計師和開發者們有了更多的選擇，以前需要使用 JavaScript 才能實現的各種很酷的界面效果和動畫，如今使用純 CSS 代碼就可以很容易實現。相信下面這些 CSS3 演示會讓你感到吃驚！

　　這篇文章收集了一組非常絢麗的 CSS3 效果應用演示，這些示例演示了 CSS3 各種新特性的強大能力。隨著越來越多的瀏覽器對 CSS3 支持的不斷完善，設計師和開發者們有了更多的選擇，以前需要使用 JavaScript 才能實現的各種很酷的界面效果和動畫，如今使用純 CSS 代碼就可以很容易實現。相信下面這些 CSS3 演示會讓你感到吃驚！

您可能還喜歡

 

Paperfold CSS

使用 CSS3 實現的立體紙張折疊的效果，淘寶商城首頁左側欄的商品分類用的就是這個效果。

 

CSS3 Lighting Effects

使用 CSS3 漸變和陰影特性實現的光線效果，非常逼真！在Chrome 和 Safari 中瀏覽最佳。

 

Beercamp: An Experiment With CSS 3D

一個 CSS 3D 書本，專門為 2012 Beercamp 活動制作，鼠標拖動可以展開立體感的書本。

 

Scroll Effect

一組借助 CSS3 特性實現的動態滾動效果，是 Github 上的開源項目，感興趣的同學可以好好研究一下。

 

CSS 3D Lighting Engine

Photon 是一個為立體空間中的 DOM 元素添加光照效果的 JavaScript 庫，結合 CSS3 特性實現。

 

3D Thumbnail Hover Effects

使用 CSS3 3D transform 等特性實現的絢麗圖片 3D 效果，提供了五組Demo，有詳細的制作教程。

 

dodecahedron

使用 CSS3 繪制的十二面體（Dodecahedron），能夠展開和合攏，非常震撼。

 

CSS3 bitmap graphics

這個位圖是純 CSS3 實現的，no images, no canvas, no data URIs。

 

Apple's iPhone 4 Slider

CSS3 動畫在蘋果 iPhone 4S 網頁中的演示，驗證了 CSS3 強大的動畫特性。

 

CSS and Type

這個網站展示了一組使用 CSS3 特性實現的文本效果，值得收藏起來慢慢學習。

 

您可能還喜歡

 

• 10套精美的免費網站后臺管理系統模板
• 24款非常實用的 CSS3 工具終極收藏
• 60款很酷的 jQuery 幻燈片演示和下載
• 8個驚艷的 HTML5 和 JavaScript 特效
• 推薦12個漂亮的 CSS3 按鈕實現方案

 

本文鏈接：未來的Web：分享7個非常絢麗的 CSS3 效果演示

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