如何在悬停时创建旋转菜单轮

在悬停时创建旋转菜单轮是一种在您的网站上展示有用链接的有趣方式。 这将是在标题中提供多个号召性用语以将用户引导到他们需要去的地方的好方法。 它也是您博客的一个很酷的子类别菜单。

在本教程中，我将向您展示如何在 Divi 中悬停时创建旋转菜单轮。 这可以通过使用内置的 Divi 选项和一些自定义 css 片段的组合来完成。

抢先看

免费下载布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）

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

在 Divi 中创建旋转菜单轮设计

基本理念

轮子是通过将一行变成一个圆形元素来创建的，它的高度和宽度为 500 像素和 50% 的圆角。 每个菜单链接都是在单独的文本模块中创建的，并通过沿行的半径（中心）旋转每个文本模块来沿圆形行的周边对齐。 此设置类似于您在 Divi 中创建弯曲文本的方式。

创建部分和第 1 行

创建一个具有一列行的常规部分。

然后将文本模块添加到具有以下内容的行。

然后更新文字设计如下：

文字字体：分享技术
文字字母间距：1px
标题 2 文字大小：8vw

添加第 2 行以构建轮子

接下来，我们需要在第 1 行下添加一个新的单列行。

在开始为链接添加文本模块之前，我们需要将行设计为一个轮子。 需要对行进行大量优化以制作我们的轮子设计。 首先，打开第 2 行的设置并更新以下内容：

背景颜色：#02366b
背景渐变左颜色：rgba(0,0,0,0.45)
背景渐变右颜色：#02366b
渐变类型：径向
径向：中心
起始位置：36%
结束位置：0%

使用自定义装订线宽度：是
天沟宽度：1
宽度：500px
最大宽度：500px（桌面），自动（平板电脑和手机）
高度：500px（桌面），自动（平板电脑和手机）
填充（桌面）：0px 顶部，0px 底部
填充（平板电脑和手机）：顶部 20 像素，底部 20 像素，左侧 20 像素
保证金（电话）：-10% 正确

我们需要将行的高度和宽度都设置为 500px，以便它是一个完美的正方形。 这将允许我们使用 Divi 中的圆角（边界半径）选项为其提供完美的圆形。

圆角：50%

然后我们可以使用框阴影添加另一个级别的圆形设计，如下所示：

盒子阴影：见截图
框阴影模糊强度：0px
框阴影传播强度：210px
阴影颜色：rgba(2,54,107,0.66)

接下来我们将添加一小段 CSS 以使我们的行内容垂直居中。 在高级选项卡下，在主元素中添加以下自定义 CSS。

display:flex;
align-items:center;

现在负责行设置。 我们稍后会回来添加我们的旋转悬停效果。

添加链接

轮子中的每个链接都将使用文本模块创建。 我们将总共创建六个文本模块。 其中五个文本模块将保存轮子的链接，其中一个文本模块将包含菜单标题。

首先创建一个新的文本模块。

然后按如下方式更新文本设置：

正文内容：“链接项目”

文字字体：分享技术
文字文字颜色：#ffffff
文字文字大小：16px（默认），20px（悬停）
文字字母间距：1px
文本行高：60px
宽度：250px（桌面），自动（平板电脑和手机）
高度：60px
填充：左20px

暂时保存设置。 然后将文本模块复制 4 次，共创建 5 个文本模块。

定位链接/文本模块

现在我们准备好沿着轮子的周边定位我们的链接。 为此，我们将使用移动/平移和旋转模块到位的变换选项更新每个文本模块。

为了使这更容易，部署线框视图模式并标记从顶部的链接 1 开始一直到底部的链接 5 的文本模块。

链接 1

我们将从编辑链接 1 开始。打开链接 1 的文本模块设置并更新以下内容：

Transform Translate Y 轴：120px（桌面），0px（平板电脑和手机）
变换旋转 Z 轴：60deg（桌面），0px（平板电脑和手机）
变换原点：50% 100%（右中）

链接 2

打开 Link 2 的文本模块设置并更新以下内容：

Transform Translate Y 轴：60px（桌面），0px（平板电脑和手机）
变换旋转 Z 轴：30deg（桌面），0px（平板电脑和手机）
变换原点：50% 100%（右中）

链接 3

由于链接 3 的文本模块在中间，我们可以将其留在原处。

链接 4

打开 Link 2 的文本模块设置并更新以下内容：

Transform Translate Y 轴：-60px（桌面），0px（平板和手机）
变换旋转 Z 轴：-30deg（桌面），0px（平板电脑和手机）
变换原点：50% 100%（右中）

链接 5

打开 Link 2 的文本模块设置并更新以下内容：

Transform Translate Y 轴：-120px（桌面），0px（平板和手机）
变换旋转 Z 轴：-60deg（桌面），0px（平板电脑和手机）
变换原点：50% 100%（右中）

现在让我们看看到目前为止的结果。 请注意文本模块中的链接/文本如何沿着圆的周长完美旋转。

添加菜单标签

要添加菜单标签，我们需要在已有的五个文本模块的顶部添加另一个文本模块。 继续并在链接 1 上方添加一个新的文本模块。

然后使用以下内容更新正文内容：

<p>menu</p>

确保菜单标签包含在 ap 标签中。 这将确保在文本设置中识别行高。

然后为了加快设计速度，复制 Link 3 文本模块的模块样式并将这些模块样式粘贴到新的文本模块。

然后更新以下内容：

行高：300px（桌面），20px（平板和手机）
高度：恢复默认设置（自动）

行高需要是 300 像素，这样它就等于内容列的高度，也是 300 像素（5 个文本模块，每个 60 像素的高度等于 300 像素）。 这将确保文本保持垂直居中。

然后我们需要将菜单标签文本模块旋转 180 度，使其正确显示在滚轮的另一侧。 这将允许访问者在悬停状态之前看到菜单标签，从而在视图中旋转链接。

变换旋转 Z 轴：180 度（桌面），0 度（平板电脑和手机）
变换原点：50% 100%（右中）

完成后，我们需要给菜单标签文本模块一个绝对位置。 为此，请将以下自定义 CSS 添加到主元素：

position: absolute !important;

现在看看结果。 您应该看到菜单项在滚轮的右侧是倒置的。

将旋转悬停效果添加到行/轮

要将旋转悬停效果添加到行，请按如下方式更新行设置：

Transform 旋转 Z 轴：180deg（桌面），0deg（悬停，0deg（平板电脑和手机）

然后更新过渡设置如下：

转换持续时间：450ms
过渡速度曲线：渐入渐出

现在看看轮子在悬停时如何旋转。

为该部分制作两列布局

现在的布局由两个一列堆叠在一起的行组成。 但是，我们可以使用 flex css 属性来水平对齐两行。 为此，我们可以向该部分添加一小段自定义 CSS。 完成后，我们将需要稍微调整间距以使事情看起来恰到好处。

打开部分设置并将以下自定义 css 添加到主元素：

display:flex;

更新第 1 行间距

接下来，更新第 1 行的大小和间距，如下所示：

宽度：40%（桌面），100%（平板电脑和手机）
边距（桌面）：剩余 5%
边距（平板电脑）：左 5%，右 5%
保证金（电话）：5%

最后的润色

在平板电脑和手机显示屏上，您需要为 Link 1 Text 模块添加一些上边距。

边距（平板电脑）：30px 顶部

并且您始终可以在该部分添加一个部分分隔符以完成设计。

最后结果

现在让我们看看最终的结果。

替代半轮设计

一种很酷的替代设计是将轮子的右半部分隐藏在该部分之外，以便隐藏链接，然后在悬停时显示。 为此，请继续复制包含我们刚刚制作的设计的整个部分。 在重复部分，按如下方式更新第 1 行设置：

宽度：70%（桌面）

然后更新第 2 行的设置，以便将轮子推到该部分之外，如下所示：

边距：-250px 右

我们需要使用 -250px，因为轮子的总宽度是 500px，我们想要正好隐藏行的一半。

然后将部分可见性设置为隐藏，如下所示：

这是最终的设计。

最后的想法

旋转的链轮是优雅的设计元素之一，可以通过微妙而独特的悬停效果吸引游客。 仅使用 Divi 的内置设计设置就可以完成多少这种设计，真是令人惊讶。 我希望这会在您的下一个项目的设计工具带中添加一些额外的东西。

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

干杯!