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