10 個驚人的動畫文本 CSS 和 JavaScript 代碼片段

已發表: 2021-03-09

您可以使用基本的 CSS 和幾行 JavaScript 來製作一些非常令人眼花繚亂的文本效果。 這些效果的範圍從文本顯示動畫到 3D 旋轉或您能想像到的任​​何其他效果。

在這篇文章中，我從網絡上收集了 10 個最酷的例子，展示了你可以用一點點程式化的文本和 CSS 代碼來做些什麼。

您可能還喜歡這些 CSS 動畫工具。

1. 標題動畫

Robin Treur 的這個動畫標題效果遵循了許多電影或電子遊戲的風格。 這些字母使用 CSS3 文本陰影和輕微的對角線傾斜呈現出突出的 3D 效果。

淡入動畫風格讓我想起了 1930 年代的經典電影，帶有相同的傾斜文本。 一切都通過 CSS 控制，但“重啟”按鈕是使用 JavaScript 構建的。 這樣，您可以多次播放動畫以獲得更好的外觀。

2. 粉碎

使用 After Effects 等工具創建破碎的破碎文本是一項簡單的任務，但使用代碼創建文本破碎動畫要困難得多，這讓 Arsen Zbidniakov 的這支筆令人印象深刻。

文本實際上是使用 SVG 形狀構建的，這使得動畫過程更容易一些。 這也意味著您不能像往常一樣選擇、複製或與文本交互。

但是，如果您將其用於徽標或其他非交互式頁面元素，則可以為您的網站添加類似的效果。

3. 扭曲的字母

開發人員 Mamun Khandaker 將這組扭曲的字母動畫組合在一起。 每種動畫樣式都有不同的名稱，您可以在這支筆中瀏覽它們。

我可以看到這些文本效果用於工具/網絡應用程序的登錄頁面或主頁。 這些立即引起了人們的注意，並給訪客留下了持久的印象。 此外，它們都是用 100% 純 CSS 製作的，而且非常容易調整。

4.像素字母

這種獨特的動畫像素效果絕對是奇怪的，但又令人著迷。 它主要依賴於 JavaScript，由開發人員 Georgi Nikoloff 創建，作為使用 HTML5 畫布元素的一種方式。

它使用 Noto Serif 作為字體基礎，並將字母轉換為畫布元素內的可延展元素。 JavaScript 將字母分解成更小的點，這些點構成了動畫的基礎。

我不能說這會有很多實際用途，但它證明了網絡動畫已經走了多遠。

5. 打字輪播

這種效果在小型投資組合和代理網站上非常流行。 鍵入文本動畫通常出現在站點的標題中，它模仿某人在文字處理器中鍵入的外觀。

一切都包含在一個元素中，並很好地混合了 CSS 和 JavaScript 動畫。 有時您會看到網站使用它來列出他們的工作、歷史或合作過的客戶的描述。

適度使用絕對是一種有趣的效果。 由於一次只能看到一個單詞，它確實限制了頁面的可讀性，但是當謹慎使用時，這是一種非常酷的效果，任何人都可以復制。

6. 泰格泰格

借用威廉·布萊克 (William Blake) 的詩歌《老虎》(The Tyger) 中的文字，約瑟夫·馬圖奇 (Joseph Martucci) 創作的這部非常獨特的動畫確實吸引了您的注意力。

這裡的重點不是內容，而是排版樣式和動畫。 文本的每個“段”都有自己的風格，帶有文本輪廓和發光效果。 這是一個很好的示例，說明如何使用setTimeout()設置主頁樣式以按順序為文本設置動畫。

7. 捕捉 SVG

開源的 Snap.svg 庫讓任何人只需一點代碼即可創建高分辨率 SVG 圖像。 這比學習 Illustrator 之類的程序要容易得多，它可以讓您像 Alexis Blondin 創建的這個有趣的示例一樣製作動畫。

所有字母都是通過 JavaScript 動態創建的，包括動畫中使用的隨機字符。 現代 SVG 支持巨大，這些圖像類型可以從根本上改變我們在未來幾年構建網站的方式。 這個 Snap.svg 動畫只是一個例子，它絕對是一個很酷的動畫。

8.括號動畫

這是我經常看到的另一種相當常見的文本動畫技術。 它使用帶有旋轉文本的括號，幾乎就像頁面上的rolodex。

這個動畫模仿了我之前提到的打字輪播效果，除了這可以只用 CSS 來製作。 它依賴於從一個 CSS 關鍵幀移動到另一個 CSS 關鍵幀的自定義循環動畫，每個幀在旋轉文本中顯示不同的單詞或短語。

我發現這種效果更微妙，更容易在主頁上閱讀。 如果您正在為您的主頁尋找一些很酷的文本效果，這將是一個很好的選擇。

9.堅不可摧的基米施密特

這種甜美的標誌效果是從 Netflix 系列《堅不可摧的基米施密特》中藉來的。 一切都是用 CSS 創建的，包括文本樣式和自定義動畫。

頁面主體有一個啟動動畫的類，這個類使用 JavaScript 附加到頁面。 從那裡開始都是純 CSS。 它主要使用一堆變換來創建令人驚訝的逼真的彈跳效果。

如果您知道如何使用 CSS3，這又是一個例子。

10. 填充 SVG 文本

最後我們來看看這個非常獨特的 SVG 填充動畫，它使用了盒子陰影和 CSS stroke 屬性的組合。

此文本完全使用 SVG 構建，但它也是可選的，因此您可以像常規文本一樣複製/粘貼字母。 它完全兼容所有瀏覽器，並且動畫非常微妙，可以適應任何網站。

所有這些文本動畫都帶來了一些新的東西。 您可能不會發現它們在您自己的工作中都實用或可用，但它們證明了只要方法正確，幾乎一切皆有可能。