好程序员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的加载样式将会很是的好用。