好程式設計師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 的載入樣式將會非常的好用。