轻构建css库_您不会相信的20酷东西是使用CSS构建的

与流行的看法相反， CSS不仅用于提供网页的基本样式以使其看起来更具吸引力。 CSS还可以做很多其他事情。 CSS具有HTML和Javascript的能力，可以创建动画和进行交互，从而使Web开发人员有机会尝试和尝试不同的方法。

就像网络浏览器就像一块空画布一样，他们可以在其中玩耍。 这里仅介绍人们使用CSS构建的酷炫和创造性的18个示例 。 从原始角色到有趣的动画，都有很多启发您自己使用CSS的方法。

Chris Pattle仅使用CSS创建了Simpsons家族的成员。 他将每个角色的脸庞分成较小的形状，然后将它们拼凑在一起。 他甚至使眼睛动起来，为角色注入生命。

如果您不能克服《小黄人》的狂热（由“ 卑鄙的我 ”电影提供），您将为此而疯狂。 Amr Zakaria使用纯CSS创建了Minions。 奴才配有眨眼和友好的波浪。

这是一个出色的文本阴影实现示例，可通过CSS实现破碎的霓虹灯标牌效果。 将鼠标悬停在字母“ c”，“ n”和“ i”上的灯光略微变暗。

这是一块简单的奶酪，是吗？ Hugo Giraduel使用CSS创建了这个3D奶酪块。 我不认识你，但它看起来也像某种家居用品。

Hugo Giraudel的另一作品。 这次，他仅使用一个元素创建了一个8位字符。

调整浏览器窗口的大小，猫的身体将随着浏览器窗口的宽度而相应地拉伸或压缩。 您认为可以拉伸或挤压CSS-kitty多远？

这是另一个有趣的地方。 缓慢向右滚动时，好像在旋转或旋转可乐罐。 纯粹用CSS就能实现的令人敬畏的效果。

该计算器的设计简洁明了，但与Javascript结合使用时，它为您提供了一种更有趣，更易上手的方法，可以进一步进行计算。

丹·伊登 （ Dan Eden ）制作的此切换按钮的灵感来自iOS7图标。 如果您亲自尝试，您将可以看到它与原始的iOS7切换按钮有何相似之处。

这是另一个可爱的奴才，以CSS绘制的绘图样式完成。

看一下动画的演示，您将看到菜单形状平滑过渡到另一个形状。

您是否相信这辆闪亮的特斯拉卡车仅由一个div元素制成？ 更不用说它在照明和前灯方面也有很多细节。 令人印象深刻。

动画的雪落。 用200百个div和CSS动画制作。 在冬季或圣诞节期间，它可能是您网站的理想背景。

一张完全由HTML和CSS制成的扑克牌，甚至包括King's衬衫和身体等细节。

带有心脏形状的开关UI。 您可能会用它来使您的网站或应用看起来更非常规。

有什么比圣诞树更好的呢？ 完全由CSS动画制作的摆动圣诞树。 圣诞节期间，您网站的完美装饰。

如果您不喜欢特斯拉卡车，那么这款经典的大众露营车会怎么样？

借助Pug模板，SCSS，精确度计算，我们可以使这个正方形旋流。

仅使用CSS，我们现在还可以在文本中添加阴影。 不仅如此，还可以使它像下面这样更加生动。

同样，它并不是完全用HTML和CSS制成的-时钟指针用JavaScript来移动-这款奇特的Lorex手表细节令人着迷。 这很有价值。

翻译自: https://www.hongkiat.com/blog/built-with-css/