起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識20個實用便捷的CSS3工具、庫及實例(上)
在本列表中，。我們從多位藝術(shù)家那里搜集了驚人的例子，足以證明使用CSS，一切皆有可能。我們還收集了一些關(guān)于CSS 3的不可思議新功能的文章，以及一些有用的CSS庫。接下來的內(nèi)容會讓你目不轉(zhuǎn)睛，所以讓我們開始吧！
不可思議的CSS 3新功能：Tutorialzine.com
為了充分感受這些例子你需要最新的瀏覽器，比如Chrome。
1. 模糊菜單
這是一個非常漂亮的僅使用CSS的菜單。實際上它有7個示例！它們都是用了新的CSS 3 transition功能，另外還巧妙地使用選擇器創(chuàng)建圓滑的模糊效果。你可以在 http://tympanus.net 閱讀代碼以了解更多。
2. CSS 3D云
在這個示例應(yīng)用里，你可以搞出一些逼真的云彩。它的存在提示你網(wǎng)頁設(shè)計可以提供的無限可能。示例代碼略微有些復(fù)雜，不僅使用了CSS3 3D 變形，還使用了JavaScript。這里是對象的高級教程：www.clicktorelease.com
3. 純CSS LOGO
有一些知名公司的logo是完全由CSS寫成的。這個例子的帥氣之處是你可以把鼠標(biāo)懸停在上面去查看究竟是哪個CSS屬性構(gòu)成了這個圖像，你也可以在 github 上查看完整的代碼。
4. CSS A/Z
自備梯子。
這是另外一個藝術(shù)化的CSS。在這些縮略圖海報，字母被描繪成美好的動畫，涌出生命。
5. Jan Kaděra的導(dǎo)航條
簡單但非常時尚的導(dǎo)航。它的CSS代碼只有65行，但是你看，它看上去給人感覺太神奇了。新的CSS 3功能變換和過渡都用于創(chuàng)建景深效果。
6. CSS的Google Doodle
這是一個小Google Doodle動畫的CSS版本。這個作品非常好，非常流暢而且沒有JavaScript！
7. 幻燈片圖像面板
另外一個制作精良的項目，這次是幻燈片面板。如絲般順滑，絕不添加JS，所有細(xì)節(jié)都精確到每一像素。示例包含4種變種和一個教程：tympanus.net。別忘了都看看！
8. 雙環(huán)
一個美麗的動畫環(huán)，在唯一一個div元素中，并使用了數(shù)百行純CSS。
9. 模糊濾鏡
使用CSS 3新特性的另一個示范，過渡、濾鏡、3D變形和所有好東西。演示本身沒什么花哨的，但是想像一下在添加了一些美麗圖層之后，會有如何奇妙的效果！
10. Flexbox的完整指南
這是一個深入介紹“flex”容器或以此為名的flexbox的文章。Flexbox是CSS中新近引入的頁面布局方式。它是一種令元素寬高及對齊方式都自動適應(yīng)空間的布局方式。
本文來源：優(yōu)設(shè)網(wǎng)
- 目前還沒評論，等你發(fā)揮！
