與流行的看法相反，CSS不僅僅是用來提供一個WEB頁面的基本風格，以使它看起來更有吸引力。還有很多其他的事情，CSS也可以做的很好。由於它創建動畫和交互的能力，CSS集合HTML以及JavaScript給WEB開發者提供了嘗試不同方法的機會。
瀏覽器就像一個空的畫布，WEB開發者可以在這裡盡情的發揮。下面是18個人們用CSS創建的又酷又有創造性的東西的例子，從原始字符到有趣的動畫，有很多激勵你自己將時間花費在CSS上。
1. The Simpsons
Chris Pattle使用純CSS創建了Simpsons家族。他把每個角色的臉部拆分成很小的形狀，然後又拼接回去。他甚至給角色的眼睛添加了動畫來賦予它們生命力
2. Minions With Pure CSS
如果你看過電影《Despicable Me(神偷奶爸)》，那你一定對其中的Minion(小黃人)印象深刻。Amr Zakaria用純CSS實現了其中的幾個Minion，它們會用閃爍的眼睛和友好的手勢給你打招呼。
3. <a href="http://cssdeck.com/labs/neon-signs-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3" rel="external nofollow" target="_blank" title="">Broken neon sign
這是用CSS的 text-shadow 實現破碎的霓虹燈效果的例子。把鼠標放到單詞上，注意字母“c”、“n”和“i”的變化。
4. Mmm… Cheese
這是一塊奶酪還是？Hugo Giraduel用CSS製作了這個3D的奶酪。我不知道你怎麼認為，但是它看起來就像某種家居用品。
5. Single Element CSS character
Hugo Giraudel的另一個作品，這次，他只用一個元素實現了8位字符。
6. Viking Shield
這個一個由 LukyVj 創建的Viking盾牌。它做的太好了，以至於你很難看出它是用CSS而不是由圖形編輯器做出來的。
7. Fluid menu with transparent icon
這是一個獨特的透明顏色滑塊菜單，當鼠標滑過的時候會有一個菜單圖標。
8. CSS Creatures
CSS Creatures是由@bennettfeely製作的可以微笑、哭或者你想表達的其他表情。你可以選擇牙齒、鬍鬚、顏色、眼睛以及嘴巴來創建你自己。
小編這裡有一套Web前端從入門到精通的學習資料，價值4980，現在免費分享給大家
轉發此文，關注並私信小編“00”即可獲取
9. Long Cat
調整您的瀏覽器窗口，貓的身體會根據瀏覽器窗口的寬度來拉伸或壓縮。你覺得這個CSS-kitty拉伸或者壓縮的的程度是多大呢？
10. Rolling coke Can
這是另一個非常有趣的。當你向右滑動滾動條的時候，看起來就像是可樂罐在滾動一樣。一個純CSS實現的很棒的效果。
11. <a href="http://thecodeplayer.com/walkthrough/javascript-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3-calculator" rel="external nofollow" target="_blank" title="">Calculator
這個計算器的設計簡單幹淨，但是如果結合JavaScript，它會給你帶來更多的樂趣。
12. Grid Animation Effect
應用任何動畫效果是很困難的，更不用說是通過純CSS。但是這個網格動畫效果實現的很漂亮。
13. Smooth iOS 7 toogle
這個由Dan Eden製作的切換按鈕靈感來源於iOS 7。如果你嘗試一下，你會看到它和原來的iOS7切換按鈕是多麼相似。
14. Animated checkmark button
Sascha Michael Trinkaus製作了這個由漸變顏色包圍的複選框按鈕。請特別注意當你點擊它的時候的效果。
15. Minion
這是另一個由CSS實現的可愛風格的Minion 。
16. Menu toogle SVG animation
看動畫的演示，您將看到菜單形狀的平穩過渡到另一個形狀。
17. Shape masking
<a href="http://cssdeck.com/user/%3Ca%20href=" http:="" www.aseoe.com="" tag-css-1.html"="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">CSSMuse" target="_blank" title="">CSSMuse用CSS實現圓、五角形、六角形。
18. Loaders Kit
這些是用純CSS實現的加載樣式。如果你想減小帶寬的使用，基於CSS的加載樣式將會非常的好用。
