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

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

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

Lucas Bebber的Glitched Text

在這里，藝術(shù)家提供了一種傳統(tǒng)的實現(xiàn)，看起來像模擬一樣，帶有一些美妙的噪音。它僅在CSS的幫助下創(chuàng)建，因此它輕巧而快速。效果有一些停頓，因此文本不會惹惱我們，而是隨便提醒我們自己。干凈整潔。

 

然而，這遠非唯一的例子。還有一些其他奇妙的解決方案，扭曲背后的美麗和整體影響。讓我們考慮一下。

螞蟻！作者：Bennett Feely

使用Blotter.js，一個現(xiàn)代的JavaScript API，用于繪制文本效果，并在洞中加入一些Aces，Bennet設(shè)法將他的杰出想法變?yōu)楝F(xiàn)實。這里，每個符號由一百個設(shè)置為混沌運動的微小不規(guī)則形狀組成。他們一起提醒我們一群螞蟻。效果不是壓倒性的，煩人的或刺激性的。相反，它具有吸引力和視覺吸引力。

Katrine-Marie Burmeister的水下SVG文本

如今，波浪效果在Web開發(fā)人員中非常受歡迎。你可以看到水面上的各種鏡頭，可以美化英雄區(qū)域的背景。排版也不例外。對于那些追隨這種趨勢的人來說，Katrine-Marie Burmeister已經(jīng)準備了一個簡單的解決方案，可以為任何文本提供可愛的水下觸感。

Corentin扭曲

讓我們讓事情更具互動性，并嘗試讓訪客參與行動。這位藝術(shù)家的想法不如Bennet Feely那么奢侈，而且比之前由Katrine-Marie Burmeister創(chuàng)作的更有趣。當用戶將鼠標光標懸停在字母上時，它具有類似液體的行為。它很簡單，但引人注目。

Noname的粒子文本

這是另一種解決方案，需要用戶的互動才能顯示其無法抑制的性質(zhì)。每個字母都由許多點組成，當鼠標光標接觸它們時，這些點開始向各個方向移動。感覺就像你要把它們吹走一樣。盡管如此，還是有一些粘合劑將所有東西聯(lián)系在一起，并且不允許符號完全分解。

文字粒子由Thibaud Goiffon提供

如果以前的解決方案感覺有點陰沉，那么這個片段無疑會以其明亮的外觀和俏皮的心情為你振作起來。

Thibaud Goiffon使用了數(shù)千個不同大小和顏色的實心圓圈，推出了一個出色的概念。他還為觀眾提供了一個小型控制面板，可以更改重力，持續(xù)時間，速度，半徑和分辨率等變量。使用設(shè)置來創(chuàng)建自己的藝術(shù)作品。

Rachel Smith的動態(tài)3D五彩紙屑文字

這個例子具有與前一個相同的魅力。這是一個可以添加自己文本的游樂場。每個符號由許多不同大小的彩色三角形組成。這里，失真效果整潔而細膩。結(jié)果是，盡管外觀大膽，但文字看起來很優(yōu)雅。沿軸移動它以從各個角度探索它。

Tatsuya Azegami的Spark Text SCSS

與Corentin創(chuàng)建的項目非常相似，此解決方案旨在讓觀眾感到愉快。將鼠標光標懸停在文本上方，您會看到一條細直線刺穿并將每個字母吹成尖銳的箭頭。當然，一切都會立即恢復(fù)正常。然而，這足以給人留下印象。

Lucas Bebber的Squiggly Text

Lucas Bebber的Squiggly Text看起來有點毛病。從本質(zhì)上講，它仍然是一種波浪般的效果。感覺就像恐懼一樣顫抖，所以對于許多萬圣節(jié)靈感的網(wǎng)站來說它肯定會派上用場。這是另一種基于SVG 過濾器的純CSS實現(xiàn)。該解決方案僅在Chrome中進行了測試，但有一些技巧，它也適用于其他流行的瀏覽器。

約書亞沃德的文字扭曲

這是另一種需要用戶交互的解決方案。當鼠標光標點擊文本時，會出現(xiàn)第二層。它由藍色和粉紅色組成，為每個字母提供模擬3D立體感。它還具有輕微的振動效果，迫使文本脈動，從而不引人注意地吸引注意力。

Justin Windle的文本爭奪效應(yīng)

Justin Windle將最平庸的文字效果之一帶到了一個新的水平。重新煥發(fā)活力的打字效果在這里看起來很簡單但很時尚。效果的解碼部分是整潔和漂亮的。它非常通用和優(yōu)雅，很容易適合眾多項目。

如果您正在尋找更多的爭奪效果，那么還有一些其他有用的代碼片段。例如，你可以嘗試Will Naugle的Text Distort，這讓人想起Justin的作品。

Blaz Kemperle的文字隨機播放和扭曲 要求用戶向下滾動以顯示改變。雖然它們都是基于相同的概念，但它們?nèi)匀徊煌⑶矣衅渥陨淼镊攘Α?/p>

扭曲的現(xiàn)實

在某些情況下，文本失真用于建立一個有趣的氛圍，如Thibaud Goiffon的Text particle示例。然而，在其他方面，它建立了一種商業(yè)氛圍，就像我們在Blash Kemperle的Text shuffle＆distort fx中所看到的那樣。

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