18個你可能不相信是用CSS制作出來的東西

與流行的看法相反，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. 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制作的可以微笑、哭或者你想表達的其他表情。你可以選擇牙齒、胡須、顏色、眼睛以及嘴巴來創建你自己。

9. Long Cat

調整您的瀏覽器窗口，貓的身體會根據瀏覽器窗口的寬度來拉伸或壓縮。你覺得這個CSS-kitty拉伸或者壓縮的的程度是多大呢？

10. Rolling coke Can

這是另一個非常有趣的。當你向右滑動滾動條的時候，看起來就像是可樂罐在滾動一樣。一個純CSS實現的很棒的效果。

11. 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

CSSMuse用CSS實現圓、五角形、六角形。

18. Loaders Kit

這些是用純CSS實現的加載樣式。如果你想減小帶寬的使用，基于CSS的加載樣式將會非常的好用。

via：hongkiat，本文由 Specs 翻譯整理，發布在 Coder資源網，轉載請注明來源。