如何在 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 花哨的动画文本是一个智能小部件，支持您快速设计任何时尚的动画。 使用该小部件，您可以将所选文本转换为精美的动画。