為了充分感受這些例子你需要最新的瀏覽器，比如Chrome。
1. 模糊選單
這是一個非常漂亮的僅使用CSS的選單。實際上它有7個示例！它們都是用了新的CSS 3 transition功能，另外還巧妙地使用選擇器建立圓滑的模糊效果。你可以在 http://tympanus.net 閱讀程式碼以瞭解更多。
2. CSS 3D雲
在這個示例應用裡，你可以搞出一些逼真的雲彩。它的存在提示你網頁設計可以提供的無限可能。示例程式碼略微有些複雜，不僅使用了CSS3 3D 變形，還使用了JavaScript。這裡是物件的高階教程：www.clicktorelease.com
3. 純CSS LOGO
有一些知名公司的logo是完全由CSS寫成的。這個例子的帥氣之處是你可以把滑鼠懸停在上面去檢視究竟是哪個CSS屬性構成了這個影象，你也可以在 github 上檢視完整的程式碼。
4.CSS A/Z
自備梯子。
這是另外一個藝術化的CSS。在這些縮圖海報，字母被描繪成美好的動畫，湧出生命。
5. Jan Kaděra的導航條
簡單但非常時尚的導航。它的CSS程式碼只有65行，但是你看，它看上去給人感覺太神奇了。新的CSS 3功能變換和過渡都用於建立景深效果。
6. CSS的Google Doodle
這是一個小Google Doodle動畫的CSS版本。這個作品非常好，非常流暢而且沒有JavaScript！
7. 幻燈片影象皮膚
另外一個製作精良的專案，這次是幻燈片皮膚。如絲般順滑，絕不新增JS，所有細節都精確到每一畫素。示例包含4種變種和一個教程：tympanus.net。別忘了都看看！
8. 雙環
一個美麗的動畫環，在唯一一個div元素中，並使用了數百行純CSS。
9.模糊濾鏡
使用CSS 3新特性的另一個示範，過渡、濾鏡、3D變形和所有好東西。演示本身沒什麼花哨的，但是想像一下在新增了一些美麗圖層之後，會有如何奇妙的效果！
10. Flexbox的完整指南
這是一個深入介紹“flex”容器或以此為名的flexbox的文章。Flexbox是CSS中新近引入的頁面佈局方式。它是一種令元素寬高及對齊方式都自動適應空間的佈局方式。
相關閱讀
評論(1)