精選12個(gè)時(shí)尚的 CSS3 效果【附源碼下載】

這里是精選的12個(gè)很炫的 CSS3 效果。CSS3 是對 CSS 規(guī)范的一個(gè)很大的改善和增強(qiáng)，它使得 Web 開發(fā)人員可以很容易的在網(wǎng)站中加入時(shí)尚的效果。以前很多需要編寫復(fù)雜的 JavaScript 代碼才能實(shí)現(xiàn)的效果，如今只需要簡單的寫幾句 CSS3 代碼就能實(shí)現(xiàn)。

　　這里是精選的12個(gè)很炫的 CSS3 效果。CSS3 是對 CSS 規(guī)范的一個(gè)很大的改善和增強(qiáng)，它使得 Web 開發(fā)人員可以很容易的在網(wǎng)站中加入時(shí)尚的效果。以前很多需要編寫復(fù)雜的 JavaScript 代碼才能實(shí)現(xiàn)的效果，如今只需要簡單的寫幾句 CSS3 代碼就能實(shí)現(xiàn)。

超炫的 CSS3 頁面切換動(dòng)畫效果

　　今天我們想與大家分享一組創(chuàng)意的頁面切換熊效果集合。我們已經(jīng)在示例中羅列了一組動(dòng)畫，可以被應(yīng)用到頁面切換過程中，創(chuàng)造出很有趣的導(dǎo)航效果。

源碼下載在線演示

使用 CSS3 打造一組質(zhì)感細(xì)膩絲滑的按鈕

　　CSS3 引入了眾多供功能強(qiáng)大的新特性，讓設(shè)計(jì)和開發(fā)人員能夠輕松的創(chuàng)作出各種精美的界面效果。下面這些發(fā)出閃亮光澤的按鈕，很漂亮吧？把鼠標(biāo)懸停在按鈕上，還有動(dòng)感的光澤移動(dòng)效果。

源碼下載在線演示

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

　　一組純 CSS 繪制的《辛普森一家》人物頭像。《辛普森一家》（The Simpsons）是馬特·格勒寧為美國福克斯廣播公司創(chuàng)作的一部動(dòng)畫情景喜劇。

源碼下載在線演示

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

　　ShineTime 是一個(gè)效果非常精致的縮略圖相冊，鼠標(biāo)懸停到縮略圖的時(shí)候有很炫的閃光效果，基于 CSS3 實(shí)現(xiàn)，另外縮略圖也會有立體移動(dòng)的效果。

源碼下載在線演示

CSS & jQuery 制作一款漂亮的多彩時(shí)鐘

　　大家可能見過各種各樣的時(shí)鐘效果，比如多年前非常流行的 Flash 制作的各種新奇的動(dòng)畫時(shí)鐘，現(xiàn)在的 Web 開發(fā)者們又開始應(yīng)用 CSS3 和 Canvas 等最新技術(shù)來實(shí)現(xiàn)。

源碼下載在線演示

美妙的 CSS3 動(dòng)畫！一組夢幻般的按鈕效果

　　今天給大家?guī)淼氖俏蹇顗艋冒愕膭?dòng)畫按鈕效果。下面是在線演示，把鼠標(biāo)放在按鈕上試試，有驚喜哦！CSS3 引入了眾多供功能強(qiáng)大的新特性，讓設(shè)計(jì)和開發(fā)人員能夠輕松的創(chuàng)作出各種精美的界面效果。

源碼下載在線演示

網(wǎng)頁邊欄過渡動(dòng)畫

　　以細(xì)微的過渡動(dòng)畫顯示一些隱藏的側(cè)邊欄，其余的內(nèi)容也是。通常側(cè)邊欄滑入，把其他內(nèi)容推到一邊。這個(gè)可過程中可以加入很多微妙而奇特的效果。

源碼下載在線演示

純 CSS3 制作可口可樂罐

　　CSS3 可以制作的效果很多，下面是一個(gè)立體的可口可樂罐。

源碼下載在線演示

使用 CSS3 實(shí)現(xiàn) 3D 圖片滑塊效果

　　使用 CSS3 的3D變換特性，我們可以通過讓元素在三維空間中變換來實(shí)現(xiàn)一些新奇的效果。這篇文章分享的這款 jQuery 立體圖片滑塊插件，利用了 3D transforms（變換）屬性來實(shí)現(xiàn)多種不同的效果。

源碼下載在線演示

單元素實(shí)現(xiàn)的 CSS 加載進(jìn)度提示效果

　　之前的文章個(gè)大家分享過各種類型的加載效果（Loading Effects），這里再給大家奉獻(xiàn)一組基于單個(gè)元素實(shí)現(xiàn)的 CSS 加載動(dòng)畫集合。這些加載效果都是基于一個(gè) DIV 元素實(shí)現(xiàn)的，十分強(qiáng)悍。

源碼下載在線演示

使用 CSS3 制作網(wǎng)格動(dòng)畫效果

　　今天我們想與大家分享一個(gè)小的動(dòng)畫概念。這個(gè)夢幻般的效果是在馬庫斯·埃克特的原型應(yīng)用程序里發(fā)現(xiàn)的??。實(shí)現(xiàn)的基本思路是對網(wǎng)格項(xiàng)目進(jìn)行 3D 旋轉(zhuǎn)，擴(kuò)展成全屏，并呈現(xiàn)內(nèi)容。