如何在 Divi 中创建波浪动画作为分隔线

已发表: 2024-12-30

作为一名网页设计师，创建一个具有视觉吸引力的网站是必须的。我们经常依靠微妙但引人入胜的设计元素来实现这一目标。其中一个元素是波浪动画，它可以充当优雅的分隔符，无缝分隔网页的各个部分，同时为设计添加动态流程。

在 Divi（一款流行的 WordPress 页面构建器）中制作这种效果可能看起来具有挑战性，但只要采用正确的技术和您的创造力，这是完全可能实现的。

在本文中，我们将引导您逐步完成在 Divi 中创建波浪动画分隔线的过程，利用其内置工具、自定义设置和一些 CSS 来进行润色。本指南将帮助您将静态分隔线转变为引人注目的动画，从而增强网站的美感和用户体验。

动画波浪作为部分分隔符

如何在 Divi 中创建波浪动画作为分隔线

步骤 1. 创建 SVG Wave

首先，我们需要创建 SVG 波形。创建 SVG 波形的方法和工具有很多。在此示例中，我们将使用在线 SVG 波形生成器之一，该生成器提供用户友好的界面和选项。

  • 单击此按钮即可开始创建美丽的 SVG 波浪。
  • 自定义波形

接下来，您可以根据自己的喜好调整参数，例如振幅、波长、频率等，以控制波的外观。

  • 控制颜色

您可以使用交互式颜色选择器或输入颜色代码（十六进制代码或 RGB 值）来选择 SVG 波形的颜色。

为了使 SVG 波浪与其下面的元素很好地融合，我们建议选择与 SVG 波浪元素下的部分背景颜色相同的颜色。

  • 出口

最后，复制生成的 SVG 代码以在您的项目中使用。保留它，因为我们稍后会需要它。

第 2 步：添加新部分

我们将把动画波分频器放在一个单独的部分内。通过创建单独的部分，您可以将分波器与页面上的其他内容隔离开来。它使独立设计、定位和管理变得更加容易。

通过选择现有的帖子类型（页面或帖子）转到 Divi Visual Builder。接下来，单击“添加新部分”按钮将新部分添加到您的页面。然后，选择一列的行布局。

行设置

在向列添加任何新模块之前，我们将首先自定义行设置。此步骤对于确保分波器的正确定位和造型至关重要。以下是一些需要考虑的关键行设置：

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

为了确保该值在每种屏幕尺寸下均为 100%，请将这些设置也应用于平板电脑和手机。

  • 间距
    • 内边距：顶部 0 像素，底部0 像素
  • 转换
    • 旋转：180度
  • 位置
    • 立场：绝对
    • 位置：底部中央
    • 垂直偏移：-2px
    • Z指数：100

步骤 3：将 SVG 代码添加到代码模块中

输入 SVG 代码

在列中添加代码模块，然后粘贴从在线 SVG 波形生成器获得的 SVG 代码。

接下来，将代码模块的宽度设置为100% ，使其跨越其容器的整个宽度，确保嵌入的 SVG 波形正确对齐并且在整个模块中看起来一致。

复制代码模块

添加 SVG 代码后，您需要复制该模块。特别适用于第二个副本/模块，必须使用绝对位置和100% 水平偏移。

第 4 步：添加 CSS 代码段

是时候添加两个 CSS 代码来使您的 SVG 波浪动画化了。第一个 CSS 代码将添加到您的页面设置中，第二个 CSS 代码将添加到您的列设置中。

  • 第一个 CSS 代码

导航到页面设置->高级选项卡 ->自定义 CSS 。然后，复制下面的 CSS 片段并将其粘贴到可用字段中。

您可以使用和编辑以下 CSS 片段来满足您的需求： 

 @keyframes wpp-waves {
	0% {变换：translateX(0)}
	25% {变换：翻译X(-25%) 缩放Y(45%);}
	50% {变换: 翻译X(-50%) 缩放Y(100%)}
	75% {变换: 翻译X(-75%) 缩放Y(45%);}
	100% {变换：translateX(-100%)}
  }
  • 第二个 CSS 代码

转到包含代码模块的列设置，然后复制下面的 CSS 代码并将其粘贴到列上的“主要元素”字段中。 

动画：wpp-waves 12s 线性无限；
变换原点：顶部；

就是这样。您可以随意编辑 CSS 片段并重新设计 SVG 形状，以便为您的部分分隔线实现最佳外观的波浪动画。如果您愿意，请不要忘记保存并发布您的页面。

CSS 代码做了什么？ 

 @keyframes wpp-waves {
	0% {变换：translateX(0)}
	25% {变换：翻译X(-25%) 缩放Y(45%);}
	50% {变换: 翻译X(-50%) 缩放Y(100%)}
	75% {变换: 翻译X(-75%) 缩放Y(45%);}
	100% {变换：translateX(-100%)}
  }

关键概念：

  • @keyframes ：这定义了一个动画序列。每个百分比（例如，0%、25% 等）代表动画期间应用特定样式的关键帧。
  • transform属性：控制平移（移动）。
    • translateX ：将元素水平移动指定的量。
    • scaleY ：垂直缩放元素。

动画片

  • 0%：从原始位置开始，不进行缩放。
  • 25%：向左移动 25% 并缩小至其高度的 45%。
  • 50%：向左移动 50% 并返回到全高。
  • 75%：向左移动 75%，并再次缩小到 45% 高度。
  • 100%：向左移动 100% 并重置为全高。 
动画：wpp-waves 12s 线性无限；
变换原点：顶部；

animation: wpp-waves 12s linear infinite;

  • wpp-waves ：应用动画的名称。
  • 12s ：动画循环的速度为12秒。
  • linear ：动画以恒定速度进行，没有缓动。
  • infinite ：动画无限循环。

transform-origin: top;

  • 变换是相对于元素的上边缘发生的。

底线

使用 Divi 创建波浪动画作为分隔符是为您的网站提供动态且引人注目的设计组件的好方法。借助 Divi 的内置工具、关键帧动画和自定义 CSS，您可以轻松合并波浪效果，从而改善网站的外观和感觉并吸引访问者。

只需几个简单的步骤，您就可以提升您的网页设计，使其更加现代和互动，同时保持 Divi 的灵活性和易用性。请随意尝试关键帧和自定义 CSS 中的其他值，以获得适合您的部分分隔线的最佳波浪动画。