與流行的看法相反，CSS不僅僅是用來提供一個WEB頁面的基本風格，以使它看起來更有吸引力。還有很多其他的事情，CSS也可以做的很好。由于它創(chuàng)建動畫和交互的能力，CSS集合HTML以及JavaScript給WEB開發(fā)者提供了嘗試不同方法的機會。

　　瀏覽器就像一個空的畫布，WEB開發(fā)者可以在這里盡情的發(fā)揮。下面是18個人們用CSS創(chuàng)建的又酷又有創(chuàng)造性的東西的例子，從原始字符到有趣的動畫，有很多激勵你自己將時間花費在CSS上。

　1. The Simpsons

　　Chris Pattle使用純CSS創(chuàng)建了Simpsons家族。他把每個角色的臉部拆分成很小的形狀，然后又拼接回去。他甚至給角色的眼睛添加了動畫來賦予它們生命力。

　2. Minions With Pure CSS

　　如果你看過電影《Despicable Me(神偷奶爸)》，那你一定對其中的Minion(小黃人)印象深刻。Amr Zakaria用純CSS實現(xiàn)了其中的幾個Minion，它們會用閃爍的眼睛和友好的手勢給你打招呼。

　3. Broken neon sign

　　這是用CSS的 text-shadow 實現(xiàn)破碎的霓虹燈效果的例子。把鼠標放到單詞上，注意字母“c”、“n”和“i”的變化。

　4. Mmm… Cheese

　　這是一塊奶酪還是？Hugo Giraduel用CSS制作了這個3D的奶酪。我不知道你怎么認為，但是它看起來就像某種家居用品。

　5. Single Element CSS character

　　Hugo Giraudel的另一個作品，這次，他只用一個元素實現(xiàn)了8位字符。

　6. Viking Shield

　　這個一個由 LukyVj 創(chuàng)建的Viking盾牌。它做的太好了，以至于你很難看出它是用CSS而不是由圖形編輯器做出來的。

　7. Fluid menu with transparent icon

　　這是一個獨特的透明顏色滑塊菜單，當鼠標滑過的時候會有一個菜單圖標。

　8. CSS Creatures

　　CSS Creatures是由@bennettfeely制作的可以微笑、哭或者你想表達的其他表情。你可以選擇牙齒、胡須、顏色、眼睛以及嘴巴來創(chuàng)建你自己。

　9. Long Cat

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

　10. Rolling coke Can

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

　11. Calculator

　　這個計算器的設計簡單干凈，但是如果結(jié)合JavaScript，它會給你帶來更多的樂趣。

　12. Grid Animation Effect

　　應用任何動畫效果是很困難的，更不用說是通過純CSS。但是這個網(wǎng)格動畫效果實現(xiàn)的很漂亮。

　13. Smooth iOS 7 toogle

　　這個由Dan Eden制作的切換按鈕靈感來源于iOS 7。如果你嘗試一下，你會看到它和原來的iOS7切換按鈕是多么相似。

　14. Animated checkmark button

　　Sascha Michael Trinkaus制作了這個由漸變顏色包圍的復選框按鈕。請?zhí)貏e注意當你點擊它的時候的效果。

　15. Minion

　　這是另一個由CSS實現(xiàn)的可愛風格的Minion 。

　16. Menu toogle SVG animation

　　看動畫的演示，您將看到菜單形狀的平穩(wěn)過渡到另一個形狀。

　17. Shape masking

　　CSSMuse用CSS實現(xiàn)圓、五角形、六角形。

　18. Loaders Kit

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

　　譯者加：

　19. CSS3火車頭

　　純CSS實現(xiàn)的，運動中的火車頭。

　　via：hongkiat，本文由 Specs 翻譯整理，發(fā)布在 Coder資源網(wǎng)

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設。