與流行的看法相反，CSS不僅僅是用來(lái)提供一個(gè)WEB頁(yè)面的基本風(fēng)格，以使它看起來(lái)更有吸引力。還有很多其他的事情，CSS也可以做的很好。由于它創(chuàng)建動(dòng)畫(huà)和交互的能力，CSS集合HTML以及JavaScript給WEB開(kāi)發(fā)者提供了嘗試不同方法的機(jī)會(huì)。
瀏覽器就像一個(gè)空的畫(huà)布，WEB開(kāi)發(fā)者可以在這里盡情的發(fā)揮。下面是18個(gè)人們用CSS創(chuàng)建的又酷又有創(chuàng)造性的東西的例子，從原始字符到有趣的動(dòng)畫(huà)，有很多激勵(lì)你自己將時(shí)間花費(fèi)在CSS上。
1. The Simpsons
Chris Pattle使用純CSS創(chuàng)建了Simpsons家族。他把每個(gè)角色的臉部拆分成很小的形狀，然后又拼接回去。他甚至給角色的眼睛添加了動(dòng)畫(huà)來(lái)賦予它們生命力。
2. Minions With Pure CSS
如果你看過(guò)電影《Despicable Me(神偷奶爸)》，那你一定對(duì)其中的Minion(小黃人)印象深刻。Amr Zakaria用純CSS實(shí)現(xiàn)了其中的幾個(gè)Minion，它們會(huì)用閃爍的眼睛和友好的手勢(shì)給你打招呼。
3. Broken neon sign
這是用CSS的 text-shadow 實(shí)現(xiàn)破碎的霓虹燈效果的例子。把鼠標(biāo)放到單詞上，注意字母“c”、“n”和“i”的變化。
4. Mmm… Cheese
這是一塊奶酪還是？Hugo Giraduel用CSS制作了這個(gè)3D的奶酪。我不知道你怎么認(rèn)為，但是它看起來(lái)就像某種家居用品。
5. Single Element CSS character
Hugo Giraudel的另一個(gè)作品，這次，他只用一個(gè)元素實(shí)現(xiàn)了8位字符。
6. Viking Shield
這個(gè)一個(gè)由 LukyVj 創(chuàng)建的Viking盾牌。它做的太好了，以至于你很難看出它是用CSS而不是由圖形編輯器做出來(lái)的。
7. Fluid menu with transparent icon
這是一個(gè)獨(dú)特的透明顏色滑塊菜單，當(dāng)鼠標(biāo)滑過(guò)的時(shí)候會(huì)有一個(gè)菜單圖標(biāo)。
8. CSS Creatures
CSS Creatures是由@bennettfeely制作的可以微笑、哭或者你想表達(dá)的其他表情。你可以選擇牙齒、胡須、顏色、眼睛以及嘴巴來(lái)創(chuàng)建你自己。
9. Long Cat
調(diào)整您的瀏覽器窗口，貓的身體會(huì)根據(jù)瀏覽器窗口的寬度來(lái)拉伸或壓縮。你覺(jué)得這個(gè)CSS-kitty拉伸或者壓縮的的程度是多大呢？
10. Rolling coke Can
這是另一個(gè)非常有趣的。當(dāng)你向右滑動(dòng)滾動(dòng)條的時(shí)候，看起來(lái)就像是可樂(lè)罐在滾動(dòng)一樣。一個(gè)純CSS實(shí)現(xiàn)的很棒的效果。
11. Calculator
這個(gè)計(jì)算器的設(shè)計(jì)簡(jiǎn)單干凈，但是如果結(jié)合JavaScript，它會(huì)給你帶來(lái)更多的樂(lè)趣。
12. Grid Animation Effect
應(yīng)用任何動(dòng)畫(huà)效果是很困難的，更不用說(shuō)是通過(guò)純CSS。但是這個(gè)網(wǎng)格動(dòng)畫(huà)效果實(shí)現(xiàn)的很漂亮。
13. Smooth iOS 7 toogle
這個(gè)由Dan Eden制作的切換按鈕靈感來(lái)源于iOS 7。如果你嘗試一下，你會(huì)看到它和原來(lái)的iOS7切換按鈕是多么相似。
14. Animated checkmark button
Sascha Michael Trinkaus制作了這個(gè)由漸變顏色包圍的復(fù)選框按鈕。請(qǐng)?zhí)貏e注意當(dāng)你點(diǎn)擊它的時(shí)候的效果。
15. Minion
這是另一個(gè)由CSS實(shí)現(xiàn)的可愛(ài)風(fēng)格的Minion 。
16. Menu toogle SVG animation
看動(dòng)畫(huà)的演示，您將看到菜單形狀的平穩(wěn)過(guò)渡到另一個(gè)形狀。
17. Shape masking
CSSMuse用CSS實(shí)現(xiàn)圓、五角形、六角形。
18. Loaders Kit
這些是用純CSS實(shí)現(xiàn)的加載樣式。如果你想減小帶寬的使用，基于CSS的加載樣式將會(huì)非常的好用。
譯者加：
19. CSS3火車(chē)頭
純CSS實(shí)現(xiàn)的，運(yùn)動(dòng)中的火車(chē)頭。
via：hongkiat，本文由 Specs 翻譯整理，發(fā)布在 Coder資源網(wǎng)
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。