如何在 WordPress 中為文本添加動畫

花哨的文字樣式可以迅速吸引觀眾的注意力。 WordPress 網站所有者經常詢問如何為文本添加動畫。 當然，您會發現多種設計 WordPress 網站文本的方法。 您可以手動添加需要更多代碼的 HTML CSS 效果。 但是編碼是向您的站點添加自定義動畫的好方法。 同樣，具有最佳小部件的插件相對方便、有效且也很受歡迎。

但是，我們已嘗試盡可能輕鬆地介紹這兩種技術。 如果您運行 WordPress 網站，請花時間閱讀博客並了解流程。 正確地按照步驟和說明進行操作將使您可以順利地自定義自己的動畫。

如何在 WordPress 中添加動畫文本效果

動畫文本效果可用於為您的 WordPress 網站增添風格和個性。 在本教程中，我們將向您展示添加這些效果的方法； 但在此之前，您必須對動畫文本及其作用有一個清晰的認識； 讓我們來學習！

什麼是動畫文本效果，它是如何出現的？

動畫文本效果也是為您的文章和標題添加一點樂趣和興奮的好方法。 當您選擇使用花哨的動畫文字效果時，您可以創建各種效果。 有些效果很簡單，如更改文本顏色或大小，而有些則是詳細的動畫，如閃爍或閃爍的文本。

動畫文本與普通文本有點不同。 通常，這種類型的文本不會自行移動。 相反，它具有使它看起來好像在屏幕上移動的效果。 因此，花哨的文字使人們更有可能點擊內容、鏈接或打開電子郵件。

動畫文本在您網站中的作用

WordPress 主題中提供了不同類型的動畫文本效果，但它們都具有相同的基本功能。 他們更改文本的顏色或樣式，並簡單地更改測試樣式。 例如，您可以更改帶有紅色背景和白色文本的“號召性用語”按鈕，上面寫著“單擊此處！” 單擊時。

動畫標題或帶有花哨文字的英雄部分扮演以下角色 -

• 讓您的設計在視覺上更有趣。
• 突出特別優惠和重要信息。
• 使您的產品功能引人注目。
• 使網站更具互動性並促進業務發展。

添加動畫文本效果的最簡單方法

使用 WordPress 插件

今天的市場為您提供了不同種類的插件，使文本樣式任務更容易。 ElementsKit 是一個非常強大的插件，也是 Elementor 頁面構建器的插件。 使用 ElementsKit，您將獲得一切。

花式動畫文本是 ElementsKit pro 推出的一款令人印象深刻的小部件。

登錄到您的儀表板 -> 選擇任何頁面或帖子 -> 單擊使用 ElementsKit 編輯 -> 搜索 ElementsKit 精美動畫文本小部件 -> 拖放小部件

內容部分

該部分稱為Fancy Text 部分，它包含以下字段 -

動畫

• 動畫風格——這裡的兩個選項是文本或 SVG，都允許你製作不同的動畫風格。
• 動畫類型——根據您的動畫類型，您將在此處獲得各種選擇。
• Reveal Duration (ms) – 您可以使用選項框以毫秒為單位設置動畫持續時間。
• Reveal Animation Delay (ms) – 在此處調整動畫延遲時間。 它指定一個動畫可以稍後開始，從開始立即開始，或者在動畫的中途立即開始。

內容

• Prefix Text – 你需要在這裡寫上你想要顯示的前綴內容。 這意味著它將在花哨的動畫之前編寫。
• Fancy Lists – 在此處添加項目以獲得精美的動畫。
• Suffix Text – 寫上你要顯示的後綴內容。 因此，它將在花哨的動畫之後指定。

• 標題 HTML 標籤– 在此處選擇內容的 HTML 標籤。
• 鏈接（可選） – 如果您希望用戶重定向到任何其他位置，請添加任何鏈接。

樣式部分

• 標題文本——利用此字段調整標題對齊方式、排版、顏色等。
• Fancy Text Lists – 使用此字段調整排版、顏色和填充。
• Fancy Cursor – 您可以使用此字段為光標賦予顏色、寬度和高度的奇特外觀。

在編輯和样式化所有必需的語句後，單擊更新並從前端查看更改。 一個例子是——

應用 CSS

在 WordPress 中創建 CSS 動畫時，請牢記以下基本但重要的事項：

• 設置正確的動畫名稱——這是當元素被 CSS 動畫移動時將顯示在元素上的名稱。 例如，如果您有一個帶有名為“fadeIn”的動畫的按鈕，這將是您將用於此屬性的值。
• 動畫持續時間——這是動畫完成所需的秒數。 您也可以將其設置為無或 0 以使動畫無限期地持續或直到發生其他事情（如頁面加載）。
• Animation-timing-function –這控制元素如何根據特定時間量（以毫秒為單位）花費多長時間從一個點移動到另一個點。 例如，如果您將此屬性設置為 ease-out，那麼您的元素將開始緩慢移動，然後在持續時間結束時加速，然後再次開始。
• Animation-delay –這是一個值，用於指定在動畫完成後再次開始之前應添加多少毫秒（例如，1s）。
• 動畫迭代計數——這是播放動畫所需的時間。 使用 CSS 屬性，您可以計算此迭代次數。
• Animations-direction——動畫播放的順序或方向。 它可以是正常的、反向的、交替的和交替反向的。
• 動畫填充模式——這些值指定了元素應該如何顯示。 它可以在應用動畫之前和之後。
• 了解@keyframes——它指定了在整個過程中發生變化的動畫屬性，以及這些屬性應該採用的值。 例如：

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

一般用百分比來表示動畫的時間。 上面的關鍵幀演示了元素的背景顏色將通過動畫從紅色變為黃色的 25%。

但是，可以使用from 和 to分別代替0% 和 100% 。

創建一個 animate.css 文件

您必須首先在您使用的文本編輯器中創建一個具有所有必要屬性的單獨文件。您可以為任何動畫選擇關鍵幀。 接下來，您必須將它們與特定的 CSS 類放在一起，以應用於 WordPress 網站上的任何文本。

從向 CSS 文件編寫簡單代碼開始。 動畫文本的示例代碼可能如下所示 -

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

現在將這個關鍵幀綁定到一個 CSS 類，我們設置了一個名為MyAnimation 的文本。 所以，在上面的代碼之後，現在你需要將下面的代碼放入文件中。

 .MyAnimation { animation-name: MyAnimation; }

您可以在這裡找到所有基本的 CSS 動畫知識和練習代碼！

您可以根據需要重複此過程以創建盡可能多的動畫。 然後，將文件另存為 animate.css。 或者，您可以下載 Animate.css 文件。 這是一個很受歡迎的文件，其中包含大量流行動畫設計的關鍵幀和 CSS 類。 此外，使用該文件將減輕您編寫複雜動畫代碼的痛苦。

上面的代碼將為您的h1 標籤“ MyAnimation ”的文本設置動畫。 您可以通過將“3s”更改為不同的值來更改動畫的持續時間。 您還可以通過更改十六進制值來更改顏色。 保存 CSS 文件後，您可以進一步更改網站的外觀，您可以編輯 CSS 文件。 您可以通過編輯 CSS 文件來更改字體、文本大小和文本顏色。 您還可以通過更改 CSS 文件來更改標題的背景顏色和大小。

將您的 animate.css 文件加載到 WordPress 站點

完成文件工作後，將其上傳到主題目錄。 我們將整個過程分為三個步驟，

步驟1

使用文件傳輸協議 (FTP) 訪問站點 -> 選擇 FTP 客戶端（FileZilla、WinSCP、Cyber​​duck 等） -> 在您的託管帳戶中選擇必要的憑據。

第2步

訪問您的 public_html 目錄 -> 導航到 wp-content -> 主題 -> 選擇活動主題或子主題的文件夾

第三步

現在，搜索名為 css 的子目錄。 如果你得到它，然後從 Animate.css 文件的子目錄上傳你的 animate.css 或 animate.min.css 文件。

但是，如果您沒有子目錄文件夾，您可以輕鬆地創建一個新文件夾。 為此，只需在加載文件後進行簡單的編輯以創建新文件即可。

通過 functions.php 調用動畫樣式表

您將在活動主題的文件夾中找到 functions.php 文件。 現在，您需要添加這段代碼來調用 Animate 樣式表：

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

請記住，如果您使用 Animate.css 中的 animate.min.css 文件，則需要在最後一行寫入 animate.min.css而不是 animate.css。 保存所有更改後，轉到您的 WordPress 儀表板。

使用 CSS 類應用動畫

所以現在可以在 animate.css 文件中應用任何你想要的類來在帖子和頁面中看到不同的動畫效果。 Animate.css 文件還允許您引用所有內容的完整列表。

最後，在經典編輯器中選擇一個帖子或頁面 -> 切換到文本編輯器 -> 如果是塊編輯器，則單擊塊工具欄中的三點圖標 -> 選擇編輯為 HTML -> 添加動畫類和動畫類到元素標籤 -> 預覽

這是向您的網站添加動畫文本的兩種有效技術，它們可以幫助您的網站更具吸引力和視覺吸引力。 通過使用其中一種技術，您可以為頁面添加一些動感和趣味。

但是，如果您對編碼一無所知，那麼應用 CSS 可能會有點困難。 因此，建議尋求專家幫助以在 WordPress 中創建 CSS 動畫。 或者，ElementsKit 花哨的動畫文本是一個智能小部件，支持您快速設計任何時尚的動畫。 使用該小部件，您可以將所選文本轉換為精美的動畫。