如何将圆形文本路径 SVG 动画添加到您的 Divi 设计中

跟上网页设计领域的趋势是作为网页设计师保持最新状态的最佳方式之一。 它允许您创建现代网站，给您的客户留下深刻印象并帮助您将技能提升到一个新的水平。 在今天的教程中，我们将向您展示如何熟悉当今在高级网站中经常看到的趋势； 圆形文本 SVG 动画。 我们将向您展示如何将这些添加到您的 Divi 页面设计中，甚至将它们用作按钮。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

创造英雄设计

添加新部分

背景颜色

让我们从创建英雄设计开始。 使用 Divi 打开一个新的或现有的页面，并在其中添加一个新的常规部分。 打开部分设置并应用您选择的背景颜色。

• 背景颜色：#f3eee8

间距

接下来进行间距设置并修改顶部和底部填充值。

• 顶部填充：30px
• 底部填充：30px

添加新行

列结构

继续向该部分添加新行，使用以下列结构：

浆纱

还没有添加模块，打开行设置，导航到设计选项卡，打开大小设置并进行以下调整：

• 宽度：95%
• 最大宽度：2580px

第 1 列设置

常规行设置到位后，您可以继续打开第一列的设置。

背景图片

在背景设置中，上传您选择的背景图片。 此图像将出现在教程下方的圆形文本 SVG 动画下方。

• 背景图片尺寸：封面
• 背景图片位置：中心
• 背景图像重复：不重复

将文本模块 #1 添加到第 2 列

添加H1内容

是时候添加模块了，从第 2 列中的第一个文本模块开始。如果您将此部分用作英雄，则添加一些您选择的 H1 内容，如果您在页面上的其他任何地方使用它，则添加一些 H2 内容。

H1 文本设置

接下来设置此模块的标题文本设置。

• 标题字体：Playfair Display
• 标题文字颜色：#212121
• 标题文字大小：
  • 桌面：100px
  • 平板电脑：60px
  • 电话：45px

浆纱

然后，转到大小设置并应用最大宽度。

• 最大宽度：600px

将文本模块 #2 添加到第 2 列

添加内容

在第一个文本模块下方，我们将添加另一个文本模块。 这一次，我们将包含一些描述内容。

文字设置

导航到设计选项卡并按如下方式设置文本样式：

• 文字字体：蒙特塞拉特
• 文字大小：15px
• 文本行高：2em

浆纱

在大小设置中也使用最大宽度。

• 最大宽度：520px

间距

然后，导航到间距设置并使用一些响应值。

• 最高保证金：
  • 台式机：20vh
  • 平板电脑和手机：50px
• 左填充：5%

边界

我们也在边框设置中包含了一个左边框。

• 左边框宽度：2px
• 左边框颜色：#000000

添加圆形文本 SVG 动画

将代码模块添加到第 1 列

现在我们已经创建了部分设计的基础，我们可以专注于创建圆形文本 SVG 动画。 要添加圆形文本 SVG 动画，我们将使用第 1 列中的代码模块。继续添加一个。

添加链接

如果您希望此圆形文本 SVG 动画可点击，您可以在模块的链接设置中添加您选择的 URL。

浆纱

确保模块的宽度也在大小设置中设置为“100%”。

• 宽度：100%

将圆形和文本 SVG 添加到代码框

回到内容选项卡中的代码框。 在这里，我们首先要使用以下 HTML 代码添加圆形 SVG 和文本路径：

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

使用 CSS 设置 SVG 样式

当然，我们需要设置 SVG 文本路径的样式以使其与我们的设计相匹配。 我们确保 SVG 也设置为“100%”。 将以下 CSS 代码行粘贴到代码框内的样式标记之间：

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

添加 AnimateTransform HTML 标签

现在，要为我们的文本创建无限旋转，我们将使用 animate 变换元素，它允许我们在不需要外部 JavaScript 代码的情况下创建动画。 这些是我们分配给 SVG 的属性：

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

您可以根据需要修改这些属性，以创建您选择的动画。 请注意最后一个属性repeatCount 是如何设置为“不定”的。 这允许我们为我们的 SVG 创建一个无限循环。

修改文本路径供自己使用

当然，您需要修改文本以使其与您自己的网站相匹配，您可以在文本路径标签之间轻松完成。 但是，一旦更改副本的长度，您就需要修改设置以确保创建一个完美的圆形。 您可以使用“dy”值，它表示沿 y 轴的偏移并更改文本路径的字体大小和字母间距，直到获得所需的结果。 就是这样！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何让您的网站跟上设计趋势。 更具体地说，我们向您展示了如何创建圆形文本 SVG 动画并在您的 Divi 设计中优雅地使用它。 一旦你掌握了方法，你就可以使用这个元素来显示你想要的任何文本，并根据你自己的设计对其进行微调。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。