2012年涌現(xiàn)出眾多獨(dú)特的,令人印象深刻的 CSS 網(wǎng)站作品,要從中挑選出年度應(yīng)用 CSS 的最佳網(wǎng)站列表一個(gè)嚴(yán)峻的挑戰(zhàn),因?yàn)?CSS 涵蓋了媒體查詢(CSS3 Media Queries)、CSS 動(dòng)畫(huà)和3D轉(zhuǎn)換等眾多特性。我根據(jù)過(guò)去 CSS 典型的應(yīng)用場(chǎ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)站,充滿樂(lè)趣和個(gè)性。
使用的俏皮動(dòng)畫(huà)和過(guò)渡效果,讓你想抓住一個(gè) iPhone 并啟動(dòng)游戲。
3. Envy Labs
Envy Labs 的其中一個(gè)標(biāo)語(yǔ)是“我們創(chuàng)造的樂(lè)趣”。采用CSS3 Transform 和 Transition 呈現(xiàn)一個(gè)很有趣的旋轉(zhuǎn)木馬!
4. Fine Goods
這個(gè)可愛(ài)的網(wǎng)站組合使用各種 CSS 屬性實(shí)現(xiàn)個(gè)性的設(shè)計(jì)。價(jià)格標(biāo)簽會(huì)旋轉(zhuǎn)變換和動(dòng)畫(huà),抽屜形式的導(dǎo)航個(gè)性十足,甚至?xí)屇愦蟪砸惑@。
微妙的動(dòng)畫(huà),外加一些打孔的插圖,轉(zhuǎn)換和邊框陰影讓圖片帶給人們真實(shí)照片的感覺(jué)。
6. Postable
由 Kevin Kneifel 開(kāi)發(fā)的 Web 應(yīng)用程序,充滿特色。聰明的懸停和過(guò)渡相結(jié)合,有趣插圖讓網(wǎng)站能夠吸引用戶
這個(gè)網(wǎng)站在互動(dòng)方面做了非常了不起的工作,保持良好的設(shè)計(jì)和使用各種效果兼顧得很好。
我最喜歡的是書(shū)本上的3D轉(zhuǎn)換效果,鼠標(biāo)懸停的時(shí)候增添了一絲的驚喜。
很可愛(ài)的企鵝,創(chuàng)新的設(shè)計(jì)帶給用戶良好的故事閱讀體驗(yàn)。
9. Microsoft
Paravel 為微軟設(shè)計(jì)了一個(gè)全新的主頁(yè),這個(gè)網(wǎng)站最大的特色在于響應(yīng)式設(shè)計(jì)。
10. Stuff & Nonsense
這個(gè)太搞了,極具創(chuàng)意的響應(yīng)式設(shè)計(jì)!縮小瀏覽器窗口瀏覽試試,有驚喜哦!