8个利用CSS和JavaScript的ASCII艺术作品片段如果你有一定的年龄，你可能记得ASCII统治互联网的时代。在

如果你有一定的年龄，你可能记得ASCII统治互联网的时代。在尖酸刻薄的备忘录，甚至GIF动画的广泛使用之前，ASCII艺术品就像一碗糖果一样被传来传去。

一些背景：ASCII（美国信息交换标准代码）是对电子设备上的文本字符进行编码的一种标准方式。字母、数字和各种不同的符号都可以通过该格式显示。

互联网上的早期通信是基于文本的。因此，有太多时间的人对这些各种各样的字符产生了一点兴趣。一些真正聪明的艺术作品被创造出来，并经常在新闻组、公告栏和电子邮件中分享。这可能是令人印象深刻的，特别是当你考虑到技术限制时。

一些非常有创造力的开发者并没有忘记ASCII艺术。事实上，他们已经使用了最新的CSS和JavaScript技术来增加运动和其他增强功能。

想要证明吗？这就是我们在这里的原因!看看我们收集的代码片段，它们为一种老式的艺术形式增添了现代气息。

安吉拉-加利亚特（Angela Galliat）的"Trippy文本

多年来，我们已经看到了一些相当离谱的纹理。但这个ASCII-meets-acid-trip文本着色器是最令人着迷的之一。

角色似乎在一簇彩虹中相互融化。看完这个，你可能需要到外面走走。

为简单的人物带来3D元素是一个挑战。这个旋转的甜甜圈能够完成这个效果，说明了CSS和JavaScript的力量。

更棒的是，JavaScript的源代码本身就是甜甜圈形状。这是自霍默-辛普森以来从未见过的敬业程度。

原创作品是很酷的，但是把图片变成ASCII的能力呢？这就是这个艺术生成器的作用。

粘贴一个图片的URL，你就会看到它在字符输出中呈现出来。调整滑块以增加你自己的个人感觉。

请看Tamino Martinius的PenASCII Art Generator。

虽然这个片段不是传统的ASCII艺术，但它很好地模拟了这种效果。通过利用CSS background-clip的作用，在标准图像上放置了一层字符。

结果是一个快速和肮脏的图像效果。由于能够将HTML中的字符改成你想要的样子，因此获得了奖励。

请看Tom Lutzenberger的 "笔式伪ASCII艺术"。

这个旋转的地球仪有一个美丽的复古外观。说真的，它看起来就像80年代街机游戏中的东西。

然而，这个美丽的作品背后的three.js技术却并不老旧。动画很流畅，颜色也很鲜艳。

请看thykka的笔式旋转ASCII地球仪

虽然ASCII艺术可以令人难以置信地复杂，但有时也有简单的时候。这个片段的特点是只有一小部分字符，但仍能有效地传达其信息。

顺便说一下，这个信息是让你翻转一个表格。点击演示文稿中的任何地方就可以这样做。现在，你不觉得好些了吗？

请看Takane Ichinose的PenCSS Only ASCII表格翻转。

这是一个利用ASCII字符的独特方法。这个片段采用ASCII输入模式，像乐高积木一样输出。

在文本区中添加你自己的字符，点击按钮就可以看到你的新作品。

请看PenLegoscii！by Praveen Puglia

这部3D动画的核心是一个人物的集合。但它的观看效果也是相当惊人的。

请注意颜色和尺寸的使用，以创造空间的幻觉。较大和较亮的颜色是 "最接近的"，而较小和较暗的颜色则挂在后面。

请看笔者的《ASCII银河》，作者Dave Kwiatkowski

上面的片段显示，在正确的手中，即使是文字也可以成为艺术。它们还提醒我们，CSS和JavaScript可以为几乎所有项目注入活力。把这两者放在一起，你就会得到一些有趣的东西，有时甚至有点让人瞠目结舌。

我们希望你喜欢这种对ASCII艺术作品的新演绎如果你想了解更多独特的例子，请查看我们的CodePen系列。