如何在 Divi 中创建渐变背景动画（2 种方式）

渐变背景动画可以成为一种精美的设计技术，让背景颜色在您的网站上栩栩如生。 对于那些想要比静态背景颜色更逼真的东西而不必求助于缓慢加载的视频背景的人来说，这是一个完美的解决方案。 渐变背景动画背后的基本思想是使用 CSS 来创建放大和动画渐变背景，以创建无缝的移动颜色过渡。

在本教程中，我们将向您展示在 Divi 中创建渐变背景动画的两种方法。 第一个组合了一个自定义 CSS 片段，该片段为 Divi 内置设置中选择的渐变颜色设置动画。 第二种方法在行或部分背景上使用径向渐变背景为多个模块设置动画。 对于如此漂亮的结果，设置实际上非常简单。

让我们开始吧！

抢先看

这是我们可以在 Divi 中创建渐变背景动画的两种方式的偷窥。

#1 渐变背景动画与 CSS 片段和 Divi 的背景选项

#2 渐变背景动画使用带有径向渐变背景的 Divi 模块

免费下载布局

要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程，好吗？

你需要什么开始

要开始，您需要执行以下操作：

1. 如果您还没有，请安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：使用 CSS 片段和 Divi 的背景选项创建渐变背景动画

首先，在 Divi Builder 的默认部分添加一列行。

部分设置

然后使用背景图像更新部分设置。 我们的渐变背景将被添加到我们的行中，因此它将位于该图像的顶部。

然后按如下方式更新填充：

• 内边距：0px 顶部，0px 底部

行和列设置

列设置

打开行设置，然后按如下方式更新列填充：

然后将以下自定义 CSS 添加到列主元素：

height: 40vw;

行设置

渐变背景

现在我们可以将渐变背景添加到行中。 如果要查看该部分的背景图像，请确保使渐变颜色半透明。

更新行设置如下：

• 渐变背景左颜色：rgba(12,113,195,0.8)
• 渐变背景右颜色：rgba(131,0,233,0.8)
• 渐变类型：线性
• 渐变方向：45度

尺寸

接下来，更新行的大小，如下所示：

• 宽度：100%
• 最大宽度：100%

自定义 CSS 类

现在我们的渐变背景已经到位，我们需要通过自定义 CSS 添加动画。 在我们添加 CSS 代码之前，我们需要添加一个自定义 CSS 类来定位这个特定的行。

转到高级选项卡并添加以下 CSS 类：

• CSS 类：动画渐变

添加代码模块

将 CSS 类添加到行后，将​​代码模块添加到行。

在代码模块中粘贴 CSS

然后将以下 CSS 代码粘贴到代码模块设置代码框中：

.animate-gradient {
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

确保将代码包装在 <style></style> 标签，因为我们将其添加到页面的 HTML 中。

结果

这是迄今为止的结果。 渐变背景已放大到原始大小的 400%，并通过左右移动进行动画处理。

添加号召性用语

为了完成设计，让我们添加一个号召性用语模块来代替一些内容。

号召性用语设置

内容

更新内容如下：

• 添加标题
• 添加按钮文本
• 添加正文
• 按钮链接地址：#
• 使用背景颜色：否

设计

跳转到设计选项卡并更新以下内容：

• 标题字体：考山文
• 标题文字大小：4vw（桌面），30px（手机）
• 标题行高：1.4em
• 正文字体：Roboto
• 按钮文字大小：16px
• 按钮文字颜色：#555555
• 按钮背景：#ffffff
• 按钮边框宽度：0px
• 按钮边框半径：30px
• 按钮字母间距：3px
• 按钮字体：Roboto Condensed
• 按钮字体粗细：粗体

结果

现在查看实时页面上的结果，其中包含号召性用语内容。 这将是您网站的一个很好的标题！

不要忘记您可以轻松地将行背景的颜色更改为您想要的任何颜色。 代码将继续在幕后工作，为您制作背景动画。

如果您熟悉 CSS，则可以通过更改动画属性的值来调整动画的速度和方向。

第 2 部分：使用带有径向渐变背景的 Divi 模块创建渐变背景动画

在 Divi 中创建渐变背景动画的第二种方法涉及为一个（或多个）模块设置动画，每个模块都有一个径向渐变背景。 这种设计技术使您可以完全控制每个模块的动画，而无需依赖外部自定义 CSS。 此外，它为无限的动画可能性打开了大门。

这是如何做到的。

重复部分

首先，让我们复制刚刚创建的部分，以便我们了解下一个设计。 为了使它更容易，切换线框视图模式。 然后单击该部分上的重复图标。 在新的重复部分中，确保删除重复的代码模块，因为我们不需要为此自定义 CSS。

更新行设置

复制该部分并删除额外的代码模块后，打开行设置更改背景渐变类型：

然后跳转到高级选项卡并删除 CSS 类。 我们不需要它。

然后更新可见性选项，如下所示：

• 水平溢出：隐藏
• 垂直溢出：隐藏

这是必要的，因为我们将在行之外定位和动画分隔器模块，我们不希望它们在那里可见。

添加第一分频器模块

我们准备添加三个分隔模块中的第一个，其中将包含渐变背景。 调整模块大小并提供渐变背景后，我们将对整个模块进行定位和动画处理。

继续并在行中添加一个分隔模块。

第一分频器模块设置

分隔线渐变背景

更新分频器模块内容如下：

• 显示分隔线：否
• 渐变背景左颜色：rgba(222,77,255,0.8)
• 渐变类型：径向
• 结束位置：70%

分频器尺寸

确保为高度和宽度提供相同的值，以保持径向渐变的完美圆完整。

位置

接下来，给分频器一个绝对位置。 这将允许将模块放置在列/行中，而不会改变您要显示的内容的间距或设计。 此外，您需要更新 Z 索引以确保模块保持在后台并且不会重叠（或隐藏）实际内容（在这种情况下是号召性用语）。

更新以下内容：

• 职位：绝对
• Z指数：-1

变换比例和平移

在我们将动画添加到模块之前，我们必须首先使用 transform scale 选项增加模块的大小，如下所示：

• 变换比例（X 和 Y）：600%

然后我们需要将我们的模块定位在动画结束时我们希望模块所在的位置。 由于我们希望动画是无缝的（当动画重复时没有任何突然的故障），我们需要确保模块位于列/行/节之外。

更新以下内容：

• 变换平移（Y）：0px
• 变换平移 (X)：100%

动画片

最后，让我们添加我们的动画。 我们将添加一个幻灯片动画，该动画从左侧窗口的外部开始，然后一直滑动到窗口右侧之外的部分。 然后它将在无限循环中重复此操作。 为此，请更新以下内容：

• 动画风格：幻灯片
• 动画方向：5000ms
• 动画强度：85%
• 动画开始不透明度：100%
• 动画速度曲线：线性
• 动画重复：循环

结果

让我们看看到目前为止的结果。

添加第二个分频器模块

要添加第二个分隔器模块，请部署线框视图模式并复制分隔器模块以创建一个新的。

二分频模块设置

渐变色

然后更新渐变颜色如下：

• 渐变背景左颜色：rgba(124,218,36,0.8)

转换翻译

之后，使用以下变换平移值更新模块的着陆位置：

变换平移 (X)：-60%

动画片

对于这个模块，我们将向左添加幻灯片动画，而不是像以前那样向右。 更新以下动画设置：

• 动画风格：幻灯片
• 动画方向：左
• 动画强度：100%

添加第三分频器模块

要创建第三个分隔器模块，请复制第二个分隔器模块并更新以下内容：

• 渐变背景左颜色：rgba(224,43,32,0.8)

• 变换平移（Y）：-100%
• 变换平移 (X)：0%

• 动画方向：向上
• 动画强度：82%

结果

看看结果！

你不必停在那里。 您可以使用不同的动画样式、渐变颜色组合来创建完全独特的东西。 您甚至可以添加更多模块！

最后的想法

在本文中，我们向您展示了在 Divi 中添加渐变背景动画的两种方法。 第一种方法使用自定义 CSS 片段，该片段与您的内置 Divi 背景渐变样式一起使用，并创建一个漂亮而干净的动画效果。 第二种方法利用 Divi 的内置选项在后台为整个模块设置动画。 希望这将为您提供发挥创意并为您的下一个项目添加漂亮的渐变背景所需的工具。

你更喜欢哪种方式？

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

干杯!