如何在 Divi 中為獨特的文本設計製作字母動畫

動畫已成為現代網站用戶體驗的常見部分。 除了它看起來很酷之外，它還可以添加一個微妙的交互元素，通過將內容帶入生活來吸引用戶。 Divi 的內置動畫效果允許您使用不同的動畫樣式為頁面上的幾乎任何元素設置動畫。

在本教程中，我將向您展示如何在 Divi 中為一些獨特的文本設計製作字母動畫。 通過將單個字母放入文本模塊，您可以針對每個字母的動畫設置不同的動畫樣式、持續時間和延遲，從而使內容以創造性的方式脫穎而出。 這種技術純粹是為了設計目的，因為構成內容的字母不會非常友好。 但是，動畫字母可讓您以驚人的方式與用戶分享您的故事。

讓我們開始吧。

搶先看

免費下載字母動畫設計示例佈局

要了解本教程中的字母動畫設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

入門

對於本教程，您只需要 Divi。 我們將使用前端的 Divi 構建器從頭開始構建設計。 首先，創建一個新頁面，為頁面指定標題，然後部署單擊以使用 Divi Builder。 然後選擇“從頭開始構建”選項並單擊以在前端構建。

現在您可以開始設計了！

為動畫字母構建佈局

添加節、行和列

繼續並創建一個具有一列行的新常規部分。

在我們開始添加我們的文本模塊（將包含白色字母）之前，讓我們為該部分添加一個深色背景圖像。 打開部分設置並添加背景圖像。 我正在使用來自投資公司登陸頁面預製佈局的抽象背景圖像。

使用文本模塊創建單個字母塊

在開始為字母添加動畫之前，我們必須首先為要添加的每個字母創建一個單獨的文本模塊。 在本例中，我們將創建文本“Divi Design”。 由於這個文本短語包括 11 個字符空格（包括字母之間的空格，我們將需要添加 11 個不同的文本模塊。

繼續向該列添加一個文本模塊。

在內容框中，添加文本的第一個字母，在本例中為字母“d”。

然後更新文字設計設置如下：

• 文字字體：魔方
• 文字字體樣式：TT
• 文字文字顏色：#ffffff
• 文字 文字大小：80px（桌面）、50px（平板電腦）、30px（手機）
• 文本行高：1.6em
• 文字方向：居中

接下來向文本模塊添加動畫，如下所示：

• 動畫風格：幻燈片
• 動畫方向：向上
• 動畫持續時間：600ms
• 動畫延遲：100ms
• 動畫開始不透明度：100%

複製文本模塊並用字母“i”更新內容。 然後將動畫延遲增加 100ms，如下所示：

• 動畫延遲：200ms

複製文本模塊並用字母“v”更新內容。 然後將動畫延遲增加到 300 毫秒。

• 動畫延遲：300ms

複製文本模塊並用字母“i”更新內容。 然後將動畫延遲增加到 400 毫秒。

• 動畫延遲：400ms

對於下一個文本模塊，我們要添加一個空格。 複製文本模塊並將以下 html 添加到內容框中：

 

無需更新此動畫延遲。

然後復製文本模塊並用字母“d”更新內容。 這是“設計”一詞的第一個字母。 然後將動畫延遲增加到 500 毫秒。

• 動畫延遲：500ms

繼續複製文本模塊並將動畫延遲增加 100 毫秒，為每個拼出“設計”一詞的剩餘字母增加動畫延遲。

• 字母“e”：動畫延遲600ms
• 字母“s”：動畫延遲700ms
• 字母“i”：動畫延遲800ms
• 字母“g”：動畫延遲900ms
• 字母“n”：動畫延遲1000ms

這是到目前為止的設計。

添加 Flex 屬性以水平對齊模塊

還不是我們正在尋找的結果。 但是我們需要做的就是神奇地將設計整合在一起，就是在行列中添加一小段 css。 為此，請打開行設置並將以下自定義 CSS 添加到列主元素。

display: flex;

display: flex 屬性在一個靈活的表格中水平對齊所有模塊，該表格將漂亮地適應不同的瀏覽器寬度。 由於模塊位於一列行中，因此該設計不會在平板電腦或移動設備上中斷。

我們還需要添加自定義裝訂線寬度以取出字母下方的底部邊距，並向行添加一些頂部和底部填充，以便字母有一些動畫空間。

• 天溝寬度：1
• 自定義填充：5vw 頂部，5vw 底部

這是最終結果。

添加不同的動畫樣式

通過此設置，您可以輕鬆添加新的動畫樣式以獲得完全獨特的效果。 為此，您可以利用 Divi 的多選功能一次更新所有模塊。 在前端，按住 shift 並單擊第一個和最後一個文本模塊。 然後打開所選模塊之一的設置。

這將打開元素設置模式，允許您更新所有選定模塊的設置。 我們不想改變動畫延遲，因為我們想保持每個字母的級聯效果。 但是，我們可以以不同的方式更新其他動畫選項以創建完全獨特的結果。

我建議在測試新動畫之前複製該部分，以便您可以保留之前的示例。

這裡有一些例子。

反向縮放文本動畫

要使用反向縮放效果為字母設置動畫，請使用以下內容更新元素設置（所有模塊的設置）：

• 動畫風格：縮放
• 動畫方向：中心
• 動畫強度：200%

這是最終結果。

滾動波浪文本動畫

要使用滾動波浪效果為字母設置動畫，請使用以下內容更新元素設置（所有模塊的設置）：

• 動畫風格：旋轉
• 動畫方向：向上
• 動畫強度：100%

這是最終結果。

多米諾文字動畫

要使用多米諾骨牌效果動畫文本，請使用以下內容更新元素設置（所有模塊的設置）：

• 動畫風格：翻轉
• 動畫方向：左
• 動畫強度：100%

這是最終結果。

站立文字動畫

要使用多米諾骨牌效果動畫文本，請使用以下內容更新元素設置（所有模塊的設置）：

• 動畫風格：折疊
• 動畫方向：向上
• 動畫強度：100%

然後通過將以下 css 添加到行設置下的主列元素來添加透視以創建 3d 設計元素。

主列元素 CSS：

perspective: 1000px;

這是最終結果。

使用動畫方向的組合為字母製作動畫

如果您想獲得更多創意，您可以使用動畫效果組合為字母設置動畫。 對於此示例，我將結合使用動畫方向和強度的幻燈片樣式。 這將為我們提供一個完全獨特的演示。

這是如何做到的。

首先，複製我們之前構建的一個部分，以便我們可以在設計過程中占得先機。

然後刪除前 4 個文本模塊，以便只顯示文本“設計”。

部分設置

接下來，由於我們希望動畫中的一些字母在剖面視口之外開始，我們需要將一小段 css 添加到剖面設置中，如下所示：

overflow: hidden;

這將保持字母隱藏，直到進入該部分。

行設置

現在，為了確保我們的文本模塊（字母）保持居中，我們需要將以下 css 添加到行設置中：

display:flex;
justify-content: center;

文本模塊通用設置

使用多選，使用以下元素設置更新所有六個文本模塊：

• 自定義邊距：左 3%，右 3%
• 邊框寬度：1px
• 邊框顏色：#ffffff

• 動畫風格：幻燈片
• 動畫持續時間：2000ms
• 動畫延遲：100ms
• 動畫強度：300%

這會處理所有文本模塊通用的基本動畫設置。 現在我們可以單獨調整它們的動畫設置。

文本模塊單獨設置

在這一點上，我們可以通過調整各個文本模塊設置來改變每個文本模塊的動畫方向，從而獲得一些樂趣。 這將使我們能夠以完全獨特的方式為字母設置動畫。 對於每個字母，更新動畫方向和強度如下：

• 字母 D
  動畫方向：向上
• 字母 E
  動畫方向：下
• 字母 S
  動畫方向：左
  動畫強度：80%
• 字母 I
  動畫方向：右
  動畫強度：80%
• 字母 G
  動畫方向：下
• 字母 N
  動畫方向：向上

這是最終的設計。

這是它在移動設備上的外觀。

最後的想法

我認為可以肯定地說，一旦您進行了正確的設置，Divi 就有很多方法可以為字母設置動畫。 而且我不得不說，在構建這些示例時，很難停止使用動畫設置。 有很多可能的變化可以嘗試！ 不管怎樣，我希望這能給你下一個項目的靈感。 如果有的話，您可能只是為了好玩而想要構建它。

我期待在評論中收到您的來信。

乾杯!