精選12個時尚的 CSS3 效果【附源碼下載】

精選12個時尚的 CSS3 效果【附源碼下載】

 

　　這裏是精選的12個很炫的 CSS3 效果。CSS3 是對 CSS 規範的一個很大的改善和加強，它使得 Web 開發人員能夠很容易的在網站中加入時尚的效果。之前不少須要編寫複雜的 JavaScript 代碼才能實現的效果，現在只須要簡單的寫幾句 CSS3 代碼就能實現。

超炫的 CSS3 頁面切換動畫效果

　　今天咱們想與你們分享一組創意的頁面切換熊效果集合。咱們已經在示例中羅列了一組動畫，能夠被應用到頁面切換過程當中，創造出頗有趣的導航效果。

源碼下載      在線演示

 

使用 CSS3 打造一組質感細膩絲滑的按鈕

　　CSS3 引入了衆多供功能強大的新特性，讓設計和開發人員可以輕鬆的創做出各類精美的界面效果。下面這些發出閃亮光澤的按鈕，很漂亮吧？把鼠標懸停在按鈕上，還有動感的光澤移動效果。

源碼下載      在線演示

 

純 CSS 繪製《辛普森一家》人物頭像

　　一組純 CSS 繪製的《辛普森一家》人物頭像。《辛普森一家》（The Simpsons）是馬特·格勒寧爲美國福克斯廣播公司創做的一部動畫情景喜劇。

源碼下載      在線演示

 

帶有 CSS3 閃亮特效的縮略圖相冊

　　ShineTime 是一個效果很是精緻的縮略圖相冊，鼠標懸停到縮略圖的時候有很炫的閃光效果，基於 CSS3 實現，另外縮略圖也會有立體移動的效果。

源碼下載      在線演示

 

CSS & jQuery 製做一款漂亮的多彩時鐘

　　你們可能見過各類各樣的時鐘效果，好比多年前很是流行的 Flash 製做的各類新奇的動畫時鐘，如今的 Web 開發者們又開始應用 CSS3 和 Canvas 等最新技術來實現。

源碼下載      在線演示

 

美妙的 CSS3 動畫！一組夢幻般的按鈕效果

　　今天給你們帶來的是五款夢幻般的動畫按鈕效果。下面是在線演示，把鼠標放在按鈕上試試，有驚喜哦！CSS3 引入了衆多供功能強大的新特性，讓設計和開發人員可以輕鬆的創做出各類精美的界面效果。

源碼下載      在線演示

 

網頁邊欄過渡動畫

　　以細微的過渡動畫顯示一些隱藏的側邊欄，其他的內容也是。一般側邊欄滑入，把其餘內容推到一邊。這個可過程當中能夠加入不少微妙而奇特的效果。

源碼下載      在線演示

 

純 CSS3 製做可口可樂罐

　　CSS3 能夠製做的效果不少，下面是一個立體的可口可樂罐。

源碼下載      在線演示

 

 

使用 CSS3 實現 3D 圖片滑塊效果

　　使用 CSS3 的3D變換特性，咱們能夠經過讓元素在三維空間中變換來實現一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊插件，利用了 3D transforms（變換）屬性來實現多種不一樣的效果。

源碼下載      在線演示

 

單元素實現的 CSS 加載進度提示效果

　　以前的文章個你們分享過各類類型的加載效果（Loading Effects），這裏再給你們奉獻一組基於單個元素實現的 CSS 加載動畫集合。這些加載效果都是基於一個 DIV 元素實現的，十分強悍。

源碼下載      在線演示

 

使用 CSS3 製做網格動畫效果

　　今天咱們想與你們分享一個小的動畫概念。這個夢幻般的效果是在馬庫斯·埃克特的原型應用程序裏發現的​​。實現的基本思路是對網格項目進行 3D 旋轉，擴展成全屏，並呈現內容。

源碼下載      在線演示

 

超炫的複選框（Checkbox）效果

　　複選框（Checkbox）在各個瀏覽器中的效果不一致，所以不少 Web 開發人員會本身從新設計一套界面和使用體驗都更佳的複選框功能。

源碼下載      在線演示

 

本文連接：精選12個很炫的 CSS3 效果【附源碼下載】

做者:山邊小溪      出處：jizhula.com 記住啦：） 歡迎任何形式的轉載，但請務必註明出處。

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