我們都喜歡排版。當類型設置為運動或加入一些動態效果時，我們更加喜歡它。

有這么多強大的工具鼓勵我們讓我們的想象力瘋狂，所以有豐富多樣的解決方案并不奇怪。在美化標題，標語或常規文本塊時，似乎天空是極限。

文本失真效應最近引起了我們的注意。“故障”效應是這個方向最明亮的代表之一。我們可以在任何地方看到它：它增強了背景，動畫，視頻和標題。

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中所看到的那樣。

通過文本失真效果，您可以為項目帶來各種情感，突出標題并保持界面看起來微不足道。為您的下一個項目創建類似的東西并不需要太多的努力，但它肯定會增加用戶體驗和整體印象。