WordPress divi主题

如何在 Divi 中将悬停效果与 CSS 视差背景相结合

by | May 10, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

在 Divi 中使用 CSS Parallax 和背景图像可以让我们创建出奇独特的悬停效果。 视差是我们可以为网站增添活力的众多方式之一。 当将视差与 Divi 的大量悬停选项相结合时,我们使内容更加生动。

google广告开户

在本教程中,我们将向您展示如何在 Divi 中快速轻松地设计独特的 CSS 视差背景悬停效果。 无需插件或自定义编码!

让我们开始吧。

抢先看

这是我们将在本教程中设计的 css 视差背景悬停效果的快速浏览。

divi css 视差悬停效果

divi css 视差悬停效果

divi css 视差悬停效果

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

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

让我们来看看教程好吗?

WordPress divi主题

你需要什么开始

要开始,您需要具备以下条件:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的图像

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

第 1 部分:在 Divi 中创建突破视差悬停效果

首先,创建一个具有一列行的常规部分。
divi css 视差悬停效果

在添加模块之前,打开部分设置并使用 CSS 视差添加背景图像。

确保图像至少 1920 像素宽。 该设计适用于具有大量纹理的较暗背景图像。 我正在使用我们的咖啡店布局包中的一个,该包可从 Divi Builder 获得。

divi css 视差悬停效果

然后在该部分添加一些填充,如下所示:

填充:10vw 顶部,10vw 底部

divi css 视差悬停效果

添加一个模糊模块

一旦部分背景和填充就位,向该行添加一个简介模块。

fiverr建站WordPress程序员

divi css 视差悬停效果

然后用几句正文更新简介内容。 您可以在那里保留默认标题。

然后单击以使用图标并为宣传语选择咖啡图标。

divi css 视差悬停效果

内容准备好后,更新设计设置如下:

独立站选品工具

图标颜色:#ffffff
图标字体大小:50px
文字对齐:居中
标题字体:Oswald
标题字体样式 TT
标题文字颜色:#ffffff
标题字母间距:2px
正文字体:Nunito
正文文本颜色:#ffffff
正文字母间距:1px
内边距:顶部 30 像素,底部 30 像素,左侧 30 像素,右侧 30 像素

divi css 视差悬停效果

调整行宽

设计完简介后,跳转到行设置并调整最大宽度。

最大宽度:80%

divi css 视差悬停效果

高质量外链购买

列设置

对于此示例,我们将在列级别激活悬停效果。 这允许您使用多个模块来构建内容,即使我们现在只使用一个模糊模块。

为了使这种视差悬停效果起作用,我们需要将相同的背景图像添加到我们在本节中使用的列中。 我们还需要在列背景图像上使用相同的 CSS 视差方法。

打开列设置并使用 CSS 视差添加相同的背景图像。

divi css 视差悬停效果

您将看不到列背景图像和部分背景图像之间的任何区别,因为它们都使用 CSS 视差,这基本上将图像固定在网页上完全相同的位置。 但是,一旦悬停效果到位,您就会看到差异。

JasperAI 10000字免费额度试用

继续更新列设计设置如下:

填充:4vw 顶部,4vw 底部
圆角:10px

然后为该列提供一个仅在悬停时显示的框阴影,如下所示:

盒子阴影:见截图
盒子阴影垂直位置:0px
盒子阴影模糊强度:36px
阴影颜色(默认):rgba(0,0,0,0)
阴影颜色(悬停):rgba(0,0,0,0.72)

divi css 视差悬停效果

WordPress备份工具updrafplus

现在让我们转到变换选项并在悬停时更新以下变换样式:

变换比例(悬停):105%

这将稍微放大列(及其内容)以创建从背景图像中略微弹出的效果。

divi css 视差悬停效果

变换平移 Y 轴(悬停):-2.5%

这会使柱子在悬停时略微向上移动,以产生轻微的不对称位移。

divi css 视差悬停效果

变换原点:100% 50%(底部中心)

这从底部中心原点开始缩放效果,当与平移值结合时,类似于微妙的铰链效果。

divi css 视差悬停效果

这是到目前为止的css视差悬停效果。

divi css 视差悬停效果

现在打开行设置并复制该列两次以创建总共三列,每列都具有相同的模糊和悬停效果。

divi css 视差悬停效果

最后结果

这是最终的设计。 请注意在向下滚动页面时默认情况下如何隐藏视差背景图像。 然后,当它们弹出时,它们会在悬停在每个列上时出现。 当您将鼠标悬停在列上时向下滚动页面时,您还可以在列上看到视差仍然起作用。 这是一种微妙但极其独特的悬停效果。

divi css 视差悬停效果

为悬停效果添加旋转

我们还可以为 css 视差悬停效果添加一个旋转,为设计添加一个不错的触感。 只需打开每个列设置并更新以下内容:

变换旋转 Z 轴(悬停时):5 度

divi css 视差悬停效果

如果你想把它混合起来,你可以给中间的列旋转-5度。

这是最终结果。

divi css 视差悬停效果

这是相同的设计,具有较浅的背景图像和较深的文本。

第 2 部分:在 Divi 中创建放大镜视差悬停效果

从第一个设计中复制部分,然后打开部分设置并用新的替换背景图像。 我正在使用我们的视频游戏布局包中的那个,因为它确实突出了放大视差悬停效果。

divi css 视差悬停效果

更新行设置

我们将需要一些额外的空间来进行此设计,因此打开行设置并更新以下内容:

天沟宽度:1
宽度:100%
最大宽度:98%

divi css 视差悬停效果

之后,跳转到内容选项卡并删除其中两列,只剩下一列。

divi css 视差悬停效果

列设置

对于这种设计,我们需要在模块级别而不是列级别应用悬停效果,因此我们需要重置列的默认样式。 为此,请右键单击列项目并选择“重置项目样式”。

divi css 视差悬停效果

更新模糊模块

列设置恢复为默认样式后,打开blurb模块设置,添加与该部分相同的css视差背景图像。

divi css 视差悬停效果

浆纱

为了创建一个圆形模块,首先我们需要给它一个匹配的宽度和高度,如下所示:

宽度:300 像素
模块对齐:中心
高度:300 像素

divi css 视差悬停效果

边界

为了完成圆形效果,我们需要更新圆角并给它一个轻微的边框。

圆角:50%
边框宽度:1px
边框颜色:rgba(255,255,255,0.12)

divi css 视差悬停效果

盒子阴影悬停效果

接下来,在悬停时给简介一个框阴影,如下所示:

盒子阴影:见截图
盒子阴影模糊强度:36px
阴影颜色(默认):rgba(0,0,0,0)
阴影颜色(悬停):rgba(0,0,0,0.7)

divi css 视差悬停效果

变换悬停效果

一旦你的盒子阴影到位,更新变换选项如下:

变换原点(默认):50% 0%(左中)

这将确保简介一旦放置在三列行的最左侧,它就不会延伸到页面之外。

divi css 视差悬停效果

变换比例(悬停):130%

这将放大简介并真正放大视差背景图像,以获得酷炫的悬停效果。

复制列

完成简介后,我们可以复制该列以创建三列,每列都具有相同的简介模块。

打开行设置并将列复制两次,总共三列。

divi css 视差悬停效果

更新变换原点

由于我们的简介模块都将变换原点设置为“左中”,因此我们需要为中心和右列中的简介进行调整,以便它们从适当的位置缩放。

打开第 2 列中的简介模块的设置并更新以下内容:

变换原点:50% 50%(中心中心)

divi css 视差悬停效果

然后打开第 3 列中的简介模块的设置并更新以下内容:

变换原点:50% 100%(右中)

divi css 视差悬停效果

最后结果

现在查看最终结果。 请注意该效果如何真正放大了简介后面的 css 视差背景图像。 当您将鼠标悬停在广告上时向下滚动时,它看起来类似于放大镜的效果。

divi css 视差悬停效果

事实上,这太酷了,我们可能希望将其保留为默认样式,而不仅仅是悬停状态。

divi css 视差悬停效果

最后的想法

我希望这篇文章中的例子能让你的创意源源不断,这样你就可以探索更酷的设计和悬停效果,以结合 css 视差。 设置过程非常简单,但可能性似乎无穷无尽。

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题