探索如何在 Divi 中创建和动画 CSS 形状

在网页设计中使用 CSS 创建形状无论如何都不是一个新概念。 事实上，创建 CSS 形状的经典方法在很大程度上已被 Canvas 和 SVG 等其他 HTML 图形解决方案所掩盖。 然而，CSS 形状（至少是基本形状）更容易创建，并且仍然可以在网页设计中发挥重要作用。 此外，当您为这些形状添加滚动动画时，会出现全新的设计元素。

在本教程中，我们将探索如何在 Divi 中创建和动画 CSS 形状。 一旦您了解了如何使用 Divi 的内置选项创建一些形状的基本概念，您就可以为这些形状设置动画，为您的网站创建独特的滚动动画设计。 你会惊讶你能做多少！

让我们开始吧。

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

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

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

探索如何在 Divi 中创建带有动画的 CSS 形状

行列结构

首先，向该部分添加三分之一三分之二的列行。

在我们做任何其他事情之前，打开行设置并更新以下内容：

• 天沟宽度：1
• 均衡柱高：是
• 宽度：95%
• 最大宽度：900px

注意：这些设置对于我们的设计设置至关重要。 例如，三分之一三分之二的列结构与最大宽度为 900px 且没有任何边距（装订线宽度为 1）的行相结合，让我们知道左列的宽度正好为 300px。 此外，如果我将我的设计包含在这个 300px 宽度的列中，我也可以确信它在平板电脑和移动设备上也会很好看。

添加分隔模块垫片

接下来，添加一个分隔线来创建包含 CSS 形状的列所需的间距。

此时，您应该打开层视图模式来管理可以在 Divi Builder 的设置菜单中找到的层/模块。

打开分隔线设置并更新分隔线的高度如下：

• 显示分隔线：否
• 高度：150px

由于我们的 CSS Shapes 将被绝对定位，因此可以通过调整分隔线的高度轻松调整列区域的实际间距。 就个人而言，我发现这比尝试操纵列的高度或间距更容易。 此外，它还为您提供了将分隔线造型为附加设计元素（或形状）的额外好处。 现在，您可以将其视为未来 CSS 形状设计的画布。

使用边框选项创建第一个 CSS 形状

为了创建我们的 CSS Shape，我们将使用一个分隔模块。 从技术上讲，我们只使用围绕模块的边界，而不是模块区域。 （因此您可以使用其他模块，例如文本模块或代码模块）。

要创建 CSS 形状，请复制之前已创建的分隔器模块。

然后通过将每个设置为0px来取出divider模块的高度和宽度，如下所示：

• 宽度：0px
• 高度：0px

对于第一个形状，我们将创建一个指向右上角的直角三角形。 为此，请按如下方式更新分隔线边框样式：

• 边框颜色：rgba(245,44,143,0.5)
• 顶部边框宽度：150px
• 左边框宽度：150px
• 左边框颜色：透明

注意：将边框颜色设置为半透明将有助于显示附加设计元素的重叠形状。

将这个新的分隔线标记为“形状 1”也是一个好主意，以便以后轻松识别。

因为我们将向我们将创建的其他形状添加滚动动画，所以重要的是给这个形状（以及本列中的其他形状）一个绝对位置，以便它们堆叠在彼此的顶部，因此，有动画的起点相同。

在高级选项卡下，将位置更改为绝对位置并将默认位置位置设置为右上角：

• 位置：绝对
• 发布位置：右上角（默认）

注意：将位置位置保持在右上角很重要，因为添加居中定位（如顶部居中或居中）的任何其他位置将与我们稍后将添加到 CSS 形状的变换选项冲突。

恭喜你创建了一个 CSS 三角形！ 虽然这本身并没有那么令人印象深刻，但它会变得更好。 一旦我们用动画移动它们，我们就可以复制这个三角形来创建各种新设计。

使用滚动动画创建形状 2

要创建下一个形状（或在本例中为三角形），请复制前一个分隔模块（形状 1）以添加一个相同的右上角三角形，该三角形直接位于前一个三角形形状上。

然后将其标记为“形状 2”。

打开“shape 2”分隔线的设置并添加以下旋转变换效果：

• 滚动变换效果：旋转
• 启用旋转：是
• 起始旋转：0°（在 30% 时）
• 中间旋转：45°（45%）
• 结束旋转：90°（60%）

使用滚动动画创建形状 3

复制“形状 2”分隔器模块并标记重复的“形状 3”。

然后更新变换旋转设置如下：

• 中间旋转：90°
• 结束旋转：180°

要创建最终（第四个）形状，请复制形状 3 分隔器模块并将其标记为“形状 4”。

然后更新变换旋转设置如下：

• 中间旋转：180°
• 结束旋转：270°

此时，您应该看到由重叠且现在旋转的三角形创建的正方形。

测试滚动动画

为了测试这些形状的滚动动画，让我们在该部分的顶部和底部添加一些临时边距。 打开部分设置并更新以下内容：

• 边距：80vh 顶部，80vh 底部

当您上下滚动页面时，它应该是这样的。

在我们探索自定义这些形状动画的新方法之前，我们将在右栏中使用模拟标题来补充我们的设计。 如果您想继续形状设计，请随意跳过此步骤。

将模拟标题添加到右列（可选）

为了帮助您了解如何在页面上使用这些动画形状设计，我认为在右栏中添加模拟标题是个好主意。 这将是一个很好的例子，说明如何使用 CSS 形状通过令人惊叹的设计动画来赞美您的页面部分标题。

列自定义 CSS

在添加标题之前，我们可以使用 display flex 属性确保文本在列内垂直居中。 打开第 2 列的设置并将以下自定义 CSS 添加到主元素：

display:flex;
flex-direction:column;
align-items:center;

列 CSS 就位后，向第 2 列添加一个新的文本模块。

然后打开文本设置并使用 h2 标题更新正文内容，如下所示：

<h2>elegant design</h2>

在设计选项卡下，更新以下内容：

• 标题 2 字体：Poppins
• 标题 2 文本对齐：默认（桌面），居中（平板电脑和手机）
• 标题 2 文字大小：55 像素（桌面）、45 像素（平板电脑）、35 像素（手机）
• 宽度：100%

在此期间，继续将以下滚动变换“水平运动”效果添加到文本中，如下所示：

• 滚动变换效果：水平运动
• 启用水平运动：是
• 起始偏移：2（20%）
• 中偏移：1（35%）
• 结束偏移：-0.6

然后打开响应式选项卡并更新结束偏移，如下所示：

• 结束偏移（平板电脑和手机）：0

探索右上角的三角形动画

继续我们在添加标题文本之前中断的地方，我们现在可以探索当前右上三角形形状的设计/动画可能性。

一种简单的方法是使用多选来选择所有四个 CSS 形状（使用分隔模块构建）。

然后打开其中一个形状的设置以调出元素设置模式，该模式将立即更新所有四个模块的设计，以便您可以直观地查看结果。

然后选择设计选项卡并打开变换原点选项卡。 将图层视图模式和元素设置模式放置在左侧，以便您可以在 Divi Builder 中直观地看到更改。

探索向上三角形 CSS 形状设计动画

现在您已经完成了设置，您可以探索创建新形状并查看它们在当前滚动动画到位时的外观。

对于下一个示例，我们将创建一个向上三角形（技术上是等腰三角形）CSS 形状。

为此，请确保多选所有形状并更新每个形状的边框样式，如下所示：

• 右边框宽度：100px
• 右边框颜色：透明
• 底部边框宽度：100px
• 底部边框颜色：rgba(245,44,143,0.5)
• 左边框宽度：100px
• 左边框颜色：透明

更新变换原点以探索新的滚动动画设计

现在我们有了一个稍微新的形状/三角形，产生的旋转动画也会有所不同。 要探索不同的滚动动画设计可能性，请确保使用多选保持所有四个形状的选择，然后调整变换原点以查看结果。

探索 Teardrop CSS 形状设计动画

到现在为止，您应该已经掌握了这个过程是如何工作的。 对于下一个设计，我们将创建一个泪珠形状，可以通过创建一个带有边框半径的右下角三角形来完成。

为此，请确保多选所有形状并更新每个形状的边框样式，如下所示：

• 圆角：右上0px，右上50%，右下50%，左下50%
• 底部边框宽度：150px
• 底部边框颜色：rgba(245,44,143,0.5)
• 左边框宽度：150px
• 左边框颜色：透明

然后调整变换原点值以探索泪珠的滚动动画设计。

探索扇形（或披萨片）CSS 形状设计动画

到现在为止，您应该已经掌握了这个过程是如何工作的。 对于下一个设计，我们将创建一个扇形，可以通过创建一个带有边界半径的右下角三角形来完成。

为此，请确保多选所有形状并更新每个形状的边框样式，如下所示：

• 圆角：右上角0px，右上角0px，右下角50%，左下角50%
• 右边框宽度：75px
• 右边框颜色：透明
• 底部边框宽度：75px
• 底部边框颜色：rgba(245,44,143,0.5)
• 左边框宽度：75px
• 左边框颜色：透明

然后调整变换原点以探索不同的滚动动画设计。

探索梯形 CSS 形状设计动画

对于我们最终的 CSS 形状设计，我们将创建一个梯形 CSS 形状，它可以为向上（或等腰）三角形添加一些额外的宽度。

为此，请确保多选所有形状并更新每个形状的边框样式，如下所示：

• 圆角：0px
• 右边框宽度：100px
• 右边框颜色：透明
• 底部边框宽度：100px
• 底部边框颜色：rgba(245,44,143,0.5)
• 左边框宽度：100px
• 左边框颜色：透明

然后更新形状/模块的宽度如下：

• 宽度：100px

梯形形状就位后，您可以再次使用更新每个的变换原点来探索新的滚动动画设计。

最终结果

让我们最后看一下使用本教程可以实现的一些我最喜欢的设计。

最后的想法

探索如何在 Divi 中创建 CSS 形状并为其设置动画可能是让这些创意源源不断的好方法，因为您可以拓宽对 Divi 内置设计功能强大功能的认识。 诀窍是了解如何使用边框来创建不同的形状。 然后，您可以为这些形状添加滚动动画。 但是不要忘记变换原点的力量，它改变了这些动画定位每个形状的方式。 当然，这是冰山一角，当您想到可以组合为您的网站创建无穷无尽的创意设计的所有不同形状和动画时。

希望这会给您一些关于如何将完美的 CSS 形状动画添加到您自己的网站的想法。

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

干杯!