Web 前沿技術：展現一組極其絢麗的 CSS3 效果

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

您可能還喜歡

• 35個讓人驚訝的 CSS3 動畫效果演示
• 24款很是實用的 CSS3 工具終極收藏
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 推薦10個很是優秀的 CSS3 開發工具
• 分享50個漂亮的 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 p_w_picpaths, 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 效果演示

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