如何将 Ken Burns 悬停效果添加到 Divi 中的图像、模块和行

肯伯恩斯效应已经存在一段时间了。 这种效果因美国纪录片导演肯·伯恩斯 (Ken Burns) 而闻名，因为他结合使用了平移和缩放技术，使他的电影中的图像栩栩如生。 在网页设计中，Ken Burns Effect 已被证明是一种流行的设计技术，可以将背景图像带入生活。

Ken Burns 效果还可以用作图像的悬停效果。 你肯定见过这个用法。 为了使图像栩栩如生，网页设计师为图像添加了悬停效果，使它们能够缩放、移动和旋转。

随着向 Divi Builder 发布 Transform 效果，将 kenburns 悬停效果带入您的图像从未如此简单。 这些变换选项允许您随意缩放（缩放）、移动（或平移）和旋转图像。 由于您可以将这些转换应用于图像的悬停状态，设计的可能性几乎是无穷无尽的。

在本教程中，我将向您展示使用 Divi Builder 为图像和行创建完全独特的 ken Burns 悬停效果是多么容易。

让我们开始吧。

抢先看

这是 ken Burns 悬停效果的先睹为快，可以使用 Divi 的变换选项轻松实现。

基本概念解释

创建 Ken Burns 悬停效果的基本概念涉及使用 Divi 的新变换选项在悬停在图像上时缩放、定位和旋转图像。 您可以按一定百分比增加缩放变换属性，以使图像在悬停时变大。 您可以使用 translate 变换属性沿 x 和 y 轴移动图像。 您可以通过设置特定的度数值（在本例中为 x 轴旋转的度数值），使用旋转变换属性来旋转图像。 最后，您可以控制过渡持续时间（速度）和速度曲线来控制 ken Burns 悬停效果的流动速度。 三个变换属性和过渡属性协同工作以创建 kenburns 悬停效果，使您的照片栩栩如生。

您可以使用 Divi 提供的内置设置轻松微调变换属性和过渡属性。 但是，使此效果起作用的关键是需要将一行简单的 css (overflow:hidden) 应用于包含图像的列。 由于您要缩放、移动和旋转图像，您希望图像的溢出隐藏在包含它的列之外。

一旦您有了基本的想法并准备好功能，使用 Divi 的转换选项将图像准确定位到您想要的位置是多么容易。

免费下载 Ken Burns 悬停效果示例

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

下载 zip 文件后，解压缩文件夹。 接下来，使用 Divi Builder Portability 功能导入 .json 布局。 或者您可以简单地使用 Divi 的拖放功能将文件拖入 Divi Builder。 就是这样！

下载文件

免费下载

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

下载

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

新页面入门

您需要做的第一件事是创建一个新页面。 然后给你一个页面标题并在前端部署Divi Builder。 然后选择“从头开始构建”选项。

将 Ken Burns 效果添加到一列行中的图像

对于第一个基本示例，我将向您展示如何将 kenburns 悬停效果添加到单列行中的单个图像。 我将使用缩放、平移和旋转变换选项来实现这种效果。

首先，创建一个具有一列行的新部分。 然后将图像模块添加到该行。

隐藏列溢出

在我们开始更新图像设置之前，打开行设置并单击高级选项卡。 然后将以下自定义 CSS 添加到 Column Main 元素：

overflow: hidden;

每当图像在悬停时缩放到更大尺寸时，这将防止图像延伸（或溢出）超出列容器。 如果不添加此项，图像将脱离容器并隐藏页面的其他元素。 从技术上讲，您可以将此 css 添加到行主元素而不是列，但您还需要摆脱任何自定义行填充。

保存行设置。

添加您的图片

现在我们可以将图像添加到图像模块中。 打开图像模块设置并添加图像。

确保图像比列大得多。 当您在悬停时将图像缩放到更大尺寸时，这对于防止图像看起来模糊很重要。 如果您使用一列行的默认设置，则该列的最大宽度将为 1080 像素。 所以，我使用的图像宽度约为 1500 像素，高度约为 900 像素。

重要提示：根据经验，图像越大，在不降低图像质量的情况下缩放、移动和旋转图像所需的空间就越大。

添加变换悬停效果

现在我们已经有了我们的图像，是时候使用这些变换选项来创建 Ken Burns 悬停效果了。 跳到设计选项卡切换打开变换选项。 激活悬停效果并选择悬停选项卡。 现在任何变换效果自定义将仅适用于图像模块的悬停状态。 然后在 Transform Scale 选项卡下，更新以下内容：

变换缩放 x 轴（悬停）：136%
变换缩放 y 轴（悬停）：136%

然后单击 Transform Translate 选项卡并更新以下内容：

Transform Translate x 轴（悬停）：3%
变换平移 y 轴（悬停）：9%

这会将图像向左移动 3%，向下移动 9%。 对于这个特定的图像，我想要放大并将这对夫妇带到列视口中心的效果。

默认情况下，翻译长度值将以像素（而不是百分比）为单位。 您可以使用像素来移动图像，但我发现使用百分比会使定位更具响应性。

接下来单击变换旋转选项卡并更新以下内容：

变换 旋转 x 轴（悬停）：6deg

更新过渡选项

最后，我们需要更新过渡持续时间（完成变换悬停效果需要多长时间）和速度曲线（允许过渡在其持续时间内改变速度的计时函数）。 对于此示例，我希望在悬停时获得更戏剧性（和经典）Ken Burns 效果的过渡需要更长的时间。 为此，请转到高级选项卡并更新过渡选项，如下所示：

转换持续时间：2000 毫秒（或 2 秒）
过渡速度曲线：线性（这确保过渡速度在持续时间内不会改变）

最后结果

现在让我们看看最终的结果。 不要被下面 gif 的断断续续误导。 在实时站点上过渡非常顺利。

将 Ken Burns 悬停效果添加到三列行中的多个图像

如果您想将 ken Burns 悬停效果添加到多列中的图像，则应用相同的过程。 您需要做的主要事情是确保将“overflow:hidden” css 片段添加到包含您的图像的每一列中。

使用上面的示例，将行的列结构更改为三列布局。

接下来，使用将隐藏每列溢出的自定义 CSS 片段更新行设置。

第 1 列主要元素 CSS：

overflow:hidden;

第 2 列主要元素 CSS：

overflow:hidden;

第 3 列主要元素 CSS：

overflow:hidden;

接下来复制图像模块并将其粘贴到第 2 列和第 3 列中。

就是这样。 这是最终结果。

由于此设计更典型的画廊网格布局，您可能希望稍微加快过渡持续时间以锐化悬停动画。 您可以使用 Divi 的多选功能轻松完成此操作。 按住 ctrl 或 cmd 并选择所有图像模块。 然后单击其中一张图像上的设置齿轮图标以打开“元素设置”模式。

现在，您在元素设置中所做的任何更新都将一次应用于所有图像。 更新元素设置中的过渡选项，如下所示：

转换持续时间：500ms

这是有效的新过渡持续时间。

将 Ken Burns 悬停效果添加到具有背景图像的任何模块

Ken Burns 悬停效果也可用于图像模块以外的模块。 如果您想将文本或图标与模块的背景图像一起转换，这很有效。

以下是将 Ken Burns 效果添加到文本模块的方法。

首先创建一个具有一列行的新常规部分。 然后向该行添加一个文本模块。

使用以下内容更新文本模块：

<h1>We're Engaged!</h1>

然后向模块添加背景图像。 请记住添加足够大的图像，以便在悬停时为缩放和移动图像留出空间。

然后更新标题设计选项如下：

标题字体：Prata
标题文字大小：6vw
自定义填充：顶部 10vw，底部 10vw，左侧 3vw

转换持续时间：5000ms

现在将以下转换设置添加到文本模块。

变换缩放 x 轴（悬停）：118%
变换缩放 y 轴（悬停）：118%

变换平移 x 轴（悬停）：6%
变换平移 y 轴（悬停）：6%

现在，使用列的以下自定义 CSS 更新行设置。

列主要元素 CSS：

overflow:hidden;

现在看看结果。

注意文本和背景图像在悬停时如何一起变换。

将 Ken Burns 悬停效果与附加悬停效果相结合

您还可以将应用于模块的 Ken Burns 悬停效果与附加效果相结合，以获得更多创意。

将 Ken Burns 悬停效果与滤镜效果相结合

如果您忘记了它们，滤镜效果是为您的模块添加创意样式的好方法，尤其是在悬停时。 您可以将这些滤镜效果与变换效果结合起来，实现一些非常独特的悬停过渡。

为了向您展示，让我们使用上面将 ken 燃烧效果添加到文本模块的示例。 由于文本模块已经有了变换悬停效果，让我们添加一个额外的滤镜效果来将图像从黑白变为彩色。

打开文本模块设置并更新以下过滤器选项：

饱和度（默认）：0%
饱和度（悬停）：100%

默认情况下，此转换会将文本模块设置为 0% 饱和度，这将去除颜色，使其变为黑白。 在悬停时设置回 100% 将添加图像的原始颜色。

这是过滤效果与 ken Burns 悬停效果相结合的最终效果。

将 Ken Burns 悬停效果与行变换效果相结合

在本示例中，我将向您展示如何将 ken burns 悬停效果与添加到行中的附加变换效果相结合。 这个想法是使用变换效果在默认状态下缩放和旋转行，然后在悬停时恢复原始设计。

注意：此技术实际上仅适用于具有单个模块的单列行。 这是因为访问者需要同时将鼠标悬停在模块和行上。 因此模块需要占据行的整个高度和宽度。 额外的模块或间距会打破悬停状态并导致问题。

为此，我们将继续使用我们当前的文本模块设计，该设计已经将 kenburns 悬停效果与附加过滤效果相结合。 所以这实际上是一个三重悬停效果！

打开包含文本模块的行的设置。 然后更新以下内容：

自定义填充：顶部 0px，底部 0px，左侧 0px，右侧 0px

这是为了确保文本模块和行之间没有额外的间距。

接下来，我们将向该行添加一个框阴影，如下所示：

盒子阴影：见截图
框阴影模糊强度：36px
阴影颜色：rgba(0,0,0,0.17)

现在添加以下变换效果：

变换缩放 x 轴（默认）：70%
变换缩放 x 轴（悬停）：100%
变换比例 y 轴（默认）：70%
变换缩放 y 轴（悬停）：100%

变换 旋转 y 轴（默认）：19deg
变换旋转 y 轴（悬停）：0deg
变换 旋转 z 轴（默认）：23deg
变换旋转 z 轴（悬停）：0deg

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

将 Ken Burns 悬停效果添加到整行内容

万一您想知道，Ken Burns 悬停效果也可用于在悬停时使整行内容栩栩如生。 这对于包含大量内容的行来说不是很实用，因为它会使访问者感到困惑或分心。 但是对于像标题这样的东西，这可能是一种有用的设计技术。 诀窍是将自定义 CSS 片段“overflow:hidden”添加到该部分。 然后您可以将变换效果添加到行中。

最后的想法

尽管 Ken Burns Effect 已经存在一段时间了，您可能仍然会发现它对于在 Divi 中为您的图像和模块创建一些非常独特的悬停效果很有用。 诀窍是知道如何使用令人惊讶的直观的 Divi 变换选项。 本教程中给出的这些示例旨在介绍这个概念，并希望为您自己的使用提供一些启发。 当您考虑将变换选项与 Divi 中可用的所有其他样式选项结合使用的所有方式时，就会出现大量想法。

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

干杯!