【译】12个令人难以置信的纯CSS实验

随着技术的不断更新迭代,CSS不再只是用来美化你的网页,它的强大令人惊叹,超出我们的想象,一起来看下它还能实现什么功能。

【正文开始】

您可能知道CSS只是简单地为您的网站设计样式的语言,但它的功能比您想象的要多得多。从逼真的图像到甚至是视频游戏,你会惊讶地看到一个优秀的开发人员可以用CSS完成什么。

这里有各种过滤器和效果,所有开源都可用于网页设计项目。这些模块是JavaScript,主要是HTML。这意味着它们比你期望的更轻盈。看看这些惊人的纯CSS实验,也许可以自己尝试一些。

太阳系

哇!如果你喜欢太空,你会被这个用CSS 动画的太阳系所震撼。这不仅仅是一个漂亮的动画; 相对于实际的地球年,每个行星都准确地围绕太阳旋转。

渐变背景动画

动画是一个臭名昭着的问题 – 网站的注意事项。如果优化不佳,它们可能导致网站速度大幅放缓。这个美丽的动画渐变非常轻巧,更不用说还可以很轻易的编辑和添加自己的颜色。

堆栈游戏

你不需要JavaScript来制作游戏。它可能很简单,但纯CSS堆栈游戏很有趣,而且图形也很漂亮。这可不容易,但它只是展示了一点CSS的能力。

3D进度条

美观,轻便的进度条,易于定制,以适应您的项目。这些条纹采用3D制作,具有独特的液体外观。你甚至可以将它们变成迷你3D 图表

Glitched Text

Glitchy文本看起来总是很酷,而且这个CSS实验在没有任何GIF,JavaScript或HTML的情况下实现了它。如果您想为您的网站添加小故障效果,请查看它。

弗朗辛

弗朗辛

你可以用HTML和CSS制作艺术品!Francine是一件18世纪风格的绘画,纯粹用代码制作和展示。但它看起来和其他传统艺术作品没有什么不同。

移动电话

与Francine类似,这款手机仅使用CSS和HTML创建。但它看起来像网站上的任何其他照片!如果您有兴趣,可以使用代码并查看如何创建此实验。

地图创作者

你认为你需要JavaScript来创建这样的东西?再想想!这个可爱的3D地图创建者只使用了CSS(和一点点HTML)。这不是很令人兴奋吗?

Instagram.css

Instagram.css

你的网站需要一些虚假的Instagram过滤器吗?这组小型文件也附带了安装教程。现在您可以轻松地将Instagram过滤器添加到任何图像中。

动画渐变鬼按钮

令人惊讶的是,这只是用CSS编写的。凭借其漂亮的动画和渐变效果,这个按钮在任何网站上看起来都很棒。

Devices.css

Devices.css

如果你曾经想在你的网站上放置一个假的电话或电脑,并在屏幕上填充你选择的图片,那么看看这个实验。这些也是仿照现代设备设计的!

动态图像着色

这非常酷:使用CSS和计算机中的颜色选择工具更改图像的颜色。

小巧、灵敏、美观

您在网站上看到的许多惊人效果都可以归结为JavaScript。但遗憾的是,JS并不总是最轻量级的解决方案。但是,您可能会对CSS的功能感到惊讶。而且,如果做得正确,它通常对性能的影响要小得多。

无论哪种方式,看到CSS开发人员可以提出的所有创意都很有趣。这些实验是由一些真正的创新开发者做出的,所以去给他们一些爱,让我们知道你认为哪一个是最酷的!

原文地址:https://1stwebdesigner.com/12-incredible-pure-css-experiments/