如何在 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 就有很多方法可以为字母设置动画。 而且我不得不说，在构建这些示例时，很难停止使用动画设置。 有很多可能的变化可以尝试！ 不管怎样，我希望这能给你下一个项目的灵感。 如果有的话，您可能只是为了好玩而想要构建它。

我期待在评论中收到您的来信。

干杯!