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