一个优秀的Web前端程序员分享18个用CSS做的东西。与流行的看法相反，CSS不仅用于提供WEB页面的基础样式，还可以使它看起来更有吸引力。CSS还可以做很多其他事情。由于其创建动画和交互的能力，CSS与HTML和JavaScript的结合为Web开发人员提供了尝试不同方法的机会。 浏览器就像一张空白的画布，WEB开发者可以在这里尽情发挥。下面是人们使用CSS创建的18个很酷且富有创意的示例，从原始角色到有趣的动画，这些内容足以激发您花时间使用CSS。 1。辛普森一家 ChrisPattle使用纯CSS创建了辛普森一家。他将每个角色的脸分解成更小的形状，然后将它们缝合在一起。他甚至为角色的眼睛制作动画，使它们栩栩如生。 2.MinionsWithPureCSS 如果你看过电影?，那你一定对里面的Minion（小黄人）印象深刻。AmrZakaria在纯CSS中实现了几个这样的小黄人，他们用眨眼和友好的手势向你致意。 3.Brokenneonsign 这是一个使用CSStext-shadow实现破碎霓虹灯效果的例子。将鼠标移到单词上，注意字母“c”、“n”和“i”是如何变化的。 4.嗯…奶酪 这是一块奶酪还是？HugoGiraduel用CSS制作了这个3D奶酪。我不了解你，但它看起来像是某种家居用品。 5.SingleElementCSScharacter HugoGiraudel的又一作品，这次实现了只有一个元素的8位字符。 6.VikingShield 这是LukyVj打造的维京盾牌。它做得非常好，很难说它是用CSS而不是图形编辑器制作的。 7.Fluidmenuwithtransparenticon 这是一个独特的透明色滑块菜单，当鼠标滑过时会有一个菜单图标。 8.CSSCreatures CSSCreatures由@bennettfeely制作，可以微笑、哭泣或任何你想要的东西。您可以选择牙齿、胡须、颜色、眼睛和嘴巴来创造自己。 9.LongCat 调整浏览器窗口，猫的身体会根据浏览器窗口的宽度进行拉伸或压缩。你认为这个CSS-kitty能拉伸或压缩多少？ 10.RollingcokeCan 这又是一个很有意思的。当您向右滑动滚动条时，它看起来像一个可乐罐在滚动。用纯CSS实现的很棒的效果。 11。Calculator 这款计算器的设计简洁明了，但如果结合JavaScript，它会给你带来更多的乐趣。 12.GridAnimationEffect 应用任何动画效果都很困难，更不用说通过纯CSS了。但是这个网格动画效果非常漂亮。 13.SmoothiiOS7toogle DanEden的这个切换按钮的灵感来自iOS7。如果您尝试一下，您会发现它与原始的iOS7切换按钮有多么相似。 14.Animatedcheckmarkbutton SaschaMichaelTrinkaus制作了这个被渐变色包围的复选标记按钮。特别注意点击时的效果。 15.Minion 这是另一个用CSS实现的可爱风格的Minion。 16.MenutoogleSVGanimation 看动画演示，你会看到菜单形状平滑过渡到另一个形状。 17.Shapemasking CSSMuseCSS实现圆形、五边形、六边形。 18.LoadersKit 这些是用纯CSS实现的加载样式。如果你想减少带宽使用，基于CSS的加载样式会非常有用。
