2012年涌現(xiàn)出眾多獨(dú)特的，令人印象深刻的?CSS 網(wǎng)站作品，要從中挑選出年度應(yīng)用CSS的最佳網(wǎng)站列表是一個(gè)嚴(yán)峻的挑戰(zhàn)，因?yàn)镃SS 涵蓋了媒體查詢（CSS3 Media Queries）、CSS動(dòng)畫和3D轉(zhuǎn)換等眾多特性。我根據(jù)過去CSS典型的應(yīng)用場景挑選了其中的優(yōu)秀作品組成一個(gè)列表，如果你有收藏更好的作品，歡迎留言向大家分享。

 

1. Beercamp

這個(gè)啤酒節(jié)的活動(dòng)網(wǎng)站充分應(yīng)用了 3D CSS Transform 技術(shù)，充滿立體感的旋轉(zhuǎn)和折疊效果。

 

2. Spelltower

Spelltower 不僅是一個(gè)令人上癮的游戲，它也有一個(gè)網(wǎng)站，充滿樂趣和個(gè)性。使用的俏皮動(dòng)畫和過渡效果，讓你想抓住一個(gè) iPhone 并啟動(dòng)游戲。

 

3. Envy Labs

Envy Labs?的其中一個(gè)標(biāo)語是“我們創(chuàng)造的樂趣”。采用CSS3 Transform 和 Transition 呈現(xiàn)一個(gè)很有趣的旋轉(zhuǎn)木馬！

 

4. Fine Goods

這個(gè)可愛的網(wǎng)站組合使用各種 CSS 屬性實(shí)現(xiàn)個(gè)性的設(shè)計(jì)。價(jià)格標(biāo)簽會旋轉(zhuǎn)變換和動(dòng)畫，抽屜形式的導(dǎo)航個(gè)性十足，甚至?xí)屇愦蟪砸惑@。

 

5. Mammoth Booth

微妙的動(dòng)畫，外加一些打孔的插圖，轉(zhuǎn)換和邊框陰影讓圖片帶給人們真實(shí)照片的感覺。

 

6. Postable

由 Kevin Kneifel 開發(fā)的 Web 應(yīng)用程序，充滿特色。聰明的懸停和過渡相結(jié)合，有趣插圖讓網(wǎng)站能夠吸引用戶。

 

7. Lift Interactive

這個(gè)網(wǎng)站在互動(dòng)方面做了非常了不起的工作，保持良好的設(shè)計(jì)和使用各種效果兼顧得很好。我最喜歡的是書本上的3D轉(zhuǎn)換效果，鼠標(biāo)懸停的時(shí)候增添了一絲的驚喜。

 

8. Impress a Penguin

很可愛的企鵝，創(chuàng)新的設(shè)計(jì)帶給用戶良好的故事閱讀體驗(yàn)。

 

9. Microsoft

Paravel 為微軟設(shè)計(jì)了一個(gè)全新的主頁，這個(gè)網(wǎng)站最大的特色在于響應(yīng)式設(shè)計(jì)。

 

10. Stuff & Nonsense

這個(gè)太搞了，極具創(chuàng)意的響應(yīng)式設(shè)計(jì)！縮小瀏覽器窗口瀏覽試試，有驚喜哦！

 

11. Hammer

使用了讓人耳目一新的鼠標(biāo)懸停過渡效果，和圖片傳送帶形成互動(dòng)。

 

12. Lab Partners

精心策劃的布局，使用非典型的旋圖片傳送帶效果。該網(wǎng)站是用于時(shí)尚藝術(shù)與設(shè)計(jì)工作室的，通過他們所選擇的顏色和對細(xì)節(jié)的關(guān)注向訪客傳達(dá)了一個(gè)強(qiáng)烈的信息。

 

13. Always Creative

總部設(shè)在休斯頓的一個(gè)創(chuàng)意機(jī)構(gòu)的網(wǎng)站，他們添加了一點(diǎn)點(diǎn)的變焦旋轉(zhuǎn)效果以及很多微妙的動(dòng)畫。

 

14. Chartbeat

讓你在其網(wǎng)站上從選擇顏色和類型開始，微妙的觸摸動(dòng)畫和轉(zhuǎn)換，滾動(dòng)的產(chǎn)品描述能夠讓你充滿好奇。

 

15. OPower UX

這個(gè)創(chuàng)意的網(wǎng)頁顯示出一個(gè)充滿個(gè)性的團(tuán)隊(duì)，使用各種時(shí)尚的元素和簡單的圖標(biāo)頁面告訴你其團(tuán)隊(duì)成員信息。

 

16. Circles Conference

使用各種形式的圓形元素技巧，加入強(qiáng)力的配色，體現(xiàn)了會議的相關(guān)的各種信息的網(wǎng)站，讓人充滿期待。

 

17. Two Paperdolls

這個(gè)優(yōu)雅的網(wǎng)站在首頁提供了兩個(gè)入口途徑，在鼠標(biāo)懸停的時(shí)候給圖像著色（默認(rèn)是灰白風(fēng)格）。

 

18. Jukely

這是網(wǎng)頁只是一個(gè)即將發(fā)布的服務(wù)的著陸頁（Landing Page），但它很有特色。

為每個(gè)元素設(shè)置的動(dòng)畫和漸變頁面背景融合在一起，讓人訂閱的時(shí)候充滿了驚奇和喜悅。

 

19. Station Four

有趣的導(dǎo)航設(shè)計(jì)，它采用大圓形形象的呈現(xiàn)主要鏈接。導(dǎo)航使用雙層圓環(huán)設(shè)計(jì)，并增加了一些熱點(diǎn)動(dòng)畫。

 

20. United Pixelworkers

這個(gè)網(wǎng)站今年進(jìn)行了兩個(gè)版本的更新，使用了奇妙的響應(yīng)布局和頁面排版，讓你挑選襯衫的過程充滿樂趣。

 

 

原文地址：http://www.cnblogs.com/lhb25/archive/2012/12/14/top-css-sites.html