你可能沒法相信的，讓你眼界大開的18個CSS傑做

導語 與流行的見解相反，CSS不單單是用來提供一個WEB頁面的基本風格，以使它看起來更有吸引力。還有不少其餘的事情，CSS也能夠作的很好。因爲它建立動畫和交互的能力，CSS集合HTML以及JavaScript給WEB開發者提供了嘗試

與流行的見解相反，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. <a href="http://cssdeck.com/labs/neon-signs-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3" rel="external nofollow" target="_blank" title="">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. <a href="http://thecodeplayer.com/walkthrough/javascript-%3Ca%20href=" http:="" www.aseoe.com="" div-css="" "="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">css3-calculator" rel="external nofollow" target="_blank" title="">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

<a href="http://cssdeck.com/user/%3Ca%20href=" http:="" www.aseoe.com="" tag-css-1.html"="" target="_blank" class="keylink" style="-webkit-tap-highlight-color: rgba(255, 0, 0, 0); color: rgb(55, 152, 144);">CSSMuse" target="_blank" title="">CSSMuse用CSS實現圓、五角形、六角形。

18. Loaders Kit

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

　　關注小編了解更多精彩內容

　　加入小編的前端學習q u n，領取精品的前端免費學習課程視頻，同時我將爲您分享精品資料。

        213+126+486   邀請碼：落葉