我们都喜欢排版。当类型设置为运动或加入一些动态效果时，我们更加喜欢它。
有这么多强大的工具鼓励我们让我们的想象力疯狂，所以有丰富多样的解决方案并不奇怪。在美化标题，标语或常规文本块时，似乎天空是极限。
文本失真效应最近引起了我们的注意。“故障”效应是这个方向最明亮的代表之一。我们可以在任何地方看到它：它增强了背景，动画，视频和标题。
Lucas Bebber的Glitched Text
在这里，艺术家提供了一种传统的实现，看起来像模拟一样，带有一些美妙的噪音。它仅在CSS的帮助下创建，因此它轻巧而快速。效果有一些停顿，因此文本不会惹恼我们，而是随便提醒我们自己。干净整洁。
然而，这远非唯一的例子。还有一些其他奇妙的解决方案，扭曲背后的美丽和整体影响。让我们考虑一下。
蚂蚁！作者：Bennett Feely
使用Blotter.js，一个现代的JavaScript API，用于绘制文本效果，并在洞中加入一些Aces，Bennet设法将他的杰出想法变为现实。这里，每个符号由一百个设置为混沌运动的微小不规则形状组成。他们一起提醒我们一群蚂蚁。效果不是压倒性的，烦人的或刺激性的。相反，它具有吸引力和视觉吸引力。
Katrine-Marie Burmeister的水下SVG文本
如今，波浪效果在Web开发人员中非常受欢迎。你可以看到水面上的各种镜头，可以美化英雄区域的背景。排版也不例外。对于那些追随这种趋势的人来说，Katrine-Marie Burmeister已经准备了一个简单的解决方案，可以为任何文本提供可爱的水下触感。
Corentin扭曲
让我们让事情更具互动性，并尝试让访客参与行动。这位艺术家的想法不如Bennet Feely那么奢侈，而且比之前由Katrine-Marie Burmeister创作的更有趣。当用户将鼠标光标悬停在字母上时，它具有类似液体的行为。它很简单，但引人注目。
Noname的粒子文本
这是另一种解决方案，需要用户的互动才能显示其无法抑制的性质。每个字母都由许多点组成，当鼠标光标接触它们时，这些点开始向各个方向移动。感觉就像你要把它们吹走一样。尽管如此，还是有一些粘合剂将所有东西联系在一起，并且不允许符号完全分解。
文字粒子由Thibaud Goiffon提供
如果以前的解决方案感觉有点阴沉，那么这个片段无疑会以其明亮的外观和俏皮的心情为你振作起来。
Thibaud Goiffon使用了数千个不同大小和颜色的实心圆圈，推出了一个出色的概念。他还为观众提供了一个小型控制面板，可以更改重力，持续时间，速度，半径和分辨率等变量。使用设置来创建自己的艺术作品。
Rachel Smith的动态3D五彩纸屑文字
这个例子具有与前一个相同的魅力。这是一个可以添加自己文本的游乐场。每个符号由许多不同大小的彩色三角形组成。这里，失真效果整洁而细腻。结果是，尽管外观大胆，但文字看起来很优雅。沿轴移动它以从各个角度探索它。
Tatsuya Azegami的Spark Text SCSS
与Corentin创建的项目非常相似，此解决方案旨在让观众感到愉快。将鼠标光标悬停在文本上方，您会看到一条细直线刺穿并将每个字母吹成尖锐的箭头。当然，一切都会立即恢复正常。然而，这足以给人留下印象。
Lucas Bebber的Squiggly Text
Lucas Bebber的Squiggly Text看起来有点毛病。从本质上讲，它仍然是一种波浪般的效果。感觉就像恐惧一样颤抖，所以对于许多万圣节灵感的网站来说它肯定会派上用场。这是另一种基于SVG 过滤器的纯CSS实现。该解决方案仅在Chrome中进行了测试，但有一些技巧，它也适用于其他流行的浏览器。
约书亚沃德的文字扭曲
这是另一种需要用户交互的解决方案。当鼠标光标点击文本时，会出现第二层。它由蓝色和粉红色组成，为每个字母提供模拟3D立体感。它还具有轻微的振动效果，迫使文本脉动，从而不引人注意地吸引注意力。
Justin Windle的文本争夺效应
Justin Windle将最平庸的文字效果之一带到了一个新的水平。重新焕发活力的打字效果在这里看起来很简单但很时尚。效果的解码部分是整洁和漂亮的。它非常通用和优雅，很容易适合众多项目。
如果您正在寻找更多的争夺效果，那么还有一些其他有用的代码片段。例如，你可以尝试Will Naugle的Text Distort，这让人想起Justin的作品。
Blaz Kemperle的文字随机播放和扭曲 要求用户向下滚动以显示改变。虽然它们都是基于相同的概念，但它们仍然不同并且有其自身的魅力。
扭曲的现实
在某些情况下，文本失真用于建立一个有趣的氛围，如Thibaud Goiffon的Text particle示例。然而，在其他方面，它建立了一种商业氛围，就像我们在Blash Kemperle的Text shuffle＆distort fx中所看到的那样。
通过文本失真效果，您可以为项目带来各种情感，突出标题并保持界面看起来微不足道。为您的下一个项目创建类似的东西并不需要太多的努力，但它肯定会增加用户体验和整体印象。