好程序員web前端分享18個用CSS製做出來的東西

　　好程序員web前端分享18個用CSS製做出來的東西，與流行的見解相反，CSS不單單是用來提供一個WEB頁面的基本風格，以使它看起來更有吸引力。還有不少其餘的事情，CSS也能夠作的很好。因爲它建立動畫和交互的能力，CSS集合HTML以及JavaScript給WEB開發者提供了嘗試不一樣方法的機會。

　　瀏覽器就像一個空的畫布，WEB開發者能夠在這裏盡情的發揮。下面是18我的們用CSS建立的又酷又有創造性的東西的例子，從原始字符到有趣的動畫，有不少激勵你本身將時間花費在CSS上。

　　1.TheSimpsons

　　ChrisPattle使用純CSS建立了Simpsons家族。他把每一個角色的臉部拆分紅很小的形狀，而後又拼接回去。他甚至給角色的眼睛添加了動畫來賦予它們生命力。

　　2.MinionsWithPureCSS

　　若是你看過電影《DespicableMe(神偷奶爸)》，那你必定對其中的Minion(小黃人)印象深入。AmrZakaria用純CSS實現了其中的幾個Minion，它們會用閃爍的眼睛和友好的手勢給你打招呼。

　　3.Brokenneonsign

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

　　4.Mmm…Cheese

　　這是一塊奶酪仍是?HugoGiraduel用CSS製做了這個3D的奶酪。我不知道你怎麼認爲，可是它看起來就像某種家居用品。

　　5.SingleElementCSScharacter

　　HugoGiraudel的另外一個做品，此次，他只用一個元素實現了8位字符。

　　6.VikingShield

　　這個一個由LukyVj建立的Viking盾牌。它作的太好了，以致於你很難看出它是用CSS而不是由圖形編輯器作出來的。

　　7.Fluidmenuwithtransparenticon

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

　　8.CSSCreatures

　　CSSCreatures是由@bennettfeely製做的能夠微笑、哭或者你想表達的其餘表情。你能夠選擇牙齒、鬍鬚、顏色、眼睛以及嘴巴來建立你本身。

　　9.LongCat

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

　　10.RollingcokeCan

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

　　11.Calculator

　　這個計算器的設計簡單幹淨，可是若是結合JavaScript，它會給你帶來更多的樂趣。

　　12.GridAnimationEffect

　　應用任何動畫效果是很困難的，更不用說是經過純CSS。可是這個網格動畫效果實現的很漂亮。

　　13.SmoothiOS7toogle

　　這個由DanEden製做的切換按鈕靈感來源於iOS7。若是你嘗試一下，你會看到它和原來的iOS7切換按鈕是多麼類似。

　　14.Animatedcheckmarkbutton

　　SaschaMichaelTrinkaus製做了這個由漸變顏色包圍的複選框按鈕。請特別注意當你點擊它的時候的效果。

　　15.Minion

　　這是另外一個由CSS實現的可愛風格的Minion。

　　16.MenutoogleSVGanimation

　　看動畫的演示，您將看到菜單形狀的平穩過渡到另外一個形狀。

　　17.Shapemasking

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

　　18.LoadersKit

　　這些是用純CSS實現的加載樣式。若是你想減少帶寬的使用，基於CSS的加載樣式將會很是的好用。