您网站成功的很大一部分取决于您是否能够给访问者留下深刻印象。 不仅与您的产品或服务有关，还与您的沟通方式和网站设计的良好程度有关。 因为让我们面对现实，网站往往是第一印象。 与任何其他类型的第一印象类似，您希望它留下良好的回味。
现在，如果您正在寻找一种独特的方式来将您的一些内容置于聚光灯下，那么创建微妙的重叠动画可能正是您正在寻找的。 这些微妙的重叠动画有点像您的访客的幻灯片。 他们不必滚动或点击任何东西，内容只是以一种优雅的方式显示出来。
让我们开始吧！
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
方法
- 我们将从以垂直顺序添加我们需要的所有设计元素开始，没有重叠
- 当我们添加所有设计元素时，我们还将添加具有一定动画延迟的自定义动画
- 这些动画延迟只有在您完成本教程的最后一部分后才有意义，该部分侧重于重叠
- 本教程的一个重要部分是使用与该部分具有相同背景颜色的成形分隔模块，以使行内容在延迟时“消失”
- 一旦您了解了使该方法有效所需的不同步骤，您就可以将此技术应用于您正在处理的任何类型的设计
让我们开始创作吧！
添加新部分
背景颜色
首先创建一个新页面或打开一个现有页面，然后向其中添加一个常规部分。 打开部分设置并添加背景。
- 背景颜色：#f3f3ec
添加第 1 行
立柱结构
继续使用以下列结构向您的部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并让行占据屏幕的整个宽度。 我们这样做的原因是为了摆脱所有默认的像素间距。 在接下来的步骤中，我们将使用视口单元添加我们需要的所有空间。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
将文本模块添加到列
添加H2含量
让我们开始添加模块！ 我们需要的第一个模块是一个带有一些 H2 内容的文本模块。 请记住，该模块将在几秒钟后“消失”，因此您要使其简短、相关且易于记忆。
H2 文本设置
然后，转到设计选项卡并修改 H2 文本设置。
- 标题 2 字体：Poppins
- 标题 2 文字颜色：#333333
- 标题 2 文字大小：5vw
间距
在间距设置中使用一些左右填充创建您想要的空间。
- 左填充：15vw
- 右填充：39vw
将分隔模块添加到列
能见度
进入下一个模块，即分频器模块。 我们正在使用这个模块使文本模块“消失”。 为此，我们需要四件事； 背景颜色（与该部分颜色相同，因此您不会注意到它），足够的填充（以确保您可以覆盖上一个模块中的所有内容），垂直重叠（以覆盖整个模块区域）和动画延迟（让第一个模块有时间在接管之前发光）。 添加分频器模块后，请确保禁用“显示分频器”选项。
背景颜色
然后，转到背景设置并添加背景颜色。 确保您使用与该部分相同的背景颜色以创建平滑效果。
- 背景颜色：#f3f3ec
间距
继续通过在间距设置中添加一些顶部和底部填充来为分隔器模块提供更大的尺寸。
- 顶部填充：9vw
- 底部填充：9vw
动画片
并通过添加延迟动画完成分隔线的设置。
- 动画风格：幻灯片
- 动画方向：向上
- 动画时长：1200ms
- 动画延迟：1500ms
- 动画强度：50%
- 动画开始不透明度：50%
添加第 2 行
立柱结构
上第二排！ 选择以下列结构：
浆纱
在不添加任何模块的情况下，打开行设置并让行占据屏幕的整个宽度。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
然后，在间距设置中的行的左侧和右侧添加一些填充。
- 左填充：10vw（桌面），2vw（平板电脑和手机）
- 右侧填充：10vw（桌面）、2vw（平板电脑和手机）
展示
我们还通过向行的主要元素添加一行 CSS 代码来确保列在较小的屏幕尺寸上彼此相邻。
display: flex;
将 Blurb 模块添加到第 1 列
添加内容
是时候开始添加模块了！ 将 Blurb Module 添加到第 1 列并输入您选择的一些内容。
选择图标
继续选择您选择的图标。
图标设置
接下来修改图标的外观。
- 图标颜色：#dbd6bd
- 圆圈图标：是
- 圆圈图标：#ffffff
- 图像/图标位置：顶部
- 使用图标字体大小：是
- 图标字体大小：2.5vw（桌面）、1.7vw（平板）、1.9vw（手机）
标题文本设置
更改标题文本设置。
- 标题字体：Source Serif Pro
- 标题文本对齐方式：居中
- 标题文字大小：1.7vw（桌面）、2.1vw（平板电脑）、2.5vw（手机）
- 标题行高：1.9em
正文文本设置
连同正文文本设置。
- 正文字体：Open Sans
- 正文文本对齐：居中
- 正文文本大小：0.8vw（桌面）、1.2vw（平板电脑）、1.6vw（手机）
- 车身线高：2.5em
浆纱
我们略微缩小了模块的大小，以确保该模块与我们将添加到第二列和第三列的模块之间有足够的空间。
- 宽度：91.7%
- 模块对齐：中心
间距
我们还将使用自定义填充值向模块添加一些额外的空间。
- 顶部填充：2vw
- 底部填充：2vw
- 左填充：1vw
- 右填充：1vw
边界
然后，转到边框设置并添加一个微妙的边框来定义模块。
- 边框宽度：1px
- 边框颜色：#333333
动画片
通过添加延迟动画完成模糊模块设计。 如您所见，我们添加的设计元素越多，动画延迟就越高。
- 动画风格：幻灯片
- 动画重复：一次
- 动画方向：向上
- 动画时长：1000ms
- 动画延迟：2000ms
- 动画强度：16%
- 动画开始不透明度：0%
克隆 Blurb 模块两次并在剩余列中放置重复项
完成 Blurb 模块设计后，您可以继续克隆它两次。 将重复项放在该行的剩余两列中。
更改重复 #1 的动画
更改第一个副本的动画延迟。
更改重复 #2 的动画
然后，打开第二个副本并在那里更改动画延迟。
将分隔模块添加到第 3 列
能见度
我们在这一行中需要的下一个也是最后一个模块是 Divider 模块。 我们再次使用这个模块来创建延迟重叠，这将有助于使 Blurb 模块“消失”。 将 Divider Module 添加到第 3 列后，请确保禁用“Show Divider”选项。
背景颜色
继续为分隔线添加背景颜色。 确保使用与部分背景相同的颜色。
- 背景颜色：#f3f3ec
间距
然后，我们将进入间距设置并增加分隔模块的大小，以便它可以在本文后面的内容中重叠所有三个 Blurb 模块。
- 左边距：-60vw（桌面），-64vw（平板电脑和手机）
- 顶部填充：17vw（台式机）、27vw（平板电脑）、30vw（手机）
- 底部填充：17vw（台式机）、27vw（平板电脑）、34vw（手机）
动画片
最后但同样重要的是，添加延迟动画。
- 动画风格：幻灯片
- 动画重复：一次
- 动画方向：右
- 动画时长：650ms
- 动画延迟：4500ms
- 动画强度：24%
- 动画开始不透明度：0%
克隆行#2
完成第二行及其所有模块后，您可以继续克隆它。
删除新行中的分隔符模块
删除重复行中的分频器模块。
更改 Blurb 模块 #1 的动画延迟
然后，打开第一个 Blurb Module 并更改动画延迟。
更改 Blurb Module #2 的动画延迟
对第 2 列中的 Blurb 模块执行相同的操作。
更改 Blurb 模块 #3 的动画延迟
并修改第 3 列中 Blurb Module 的动画延迟。
添加重叠
将重叠添加到分频器模块 #1
现在我们已经拥有了我们需要的所有设计元素，我们可以开始创建重叠了！ 这些重叠将为我们在整个教程中添加的动画延迟赋予意义。 从您创建的第一行中的分隔模块开始。
将重叠添加到第 2 行
然后，打开第二行并为其添加一些负上边距。
将重叠添加到第 2 行中的模糊模块
打开第二行中的每个 Blurb 模块并向它们添加一些自定义边距值。
- 最高边距：-10vw
- 底边距：7vw
将重叠添加到分频器模块 #2
转到您可以在第二行的第三列中找到的 Divider Module 并创建重叠。
- 最高边距：-35vw（台式机）、-47vw（平板电脑）、-72vw（手机）
将重叠添加到第 3 行
继续打开第三行的设置并添加一些负上边距。
将重叠添加到第 3 行中的模糊模块
最后但同样重要的是，为第三行中的每个 Blurb 模块添加一些自定义边距值。 退出 Visual Builder 后，您将能够实时看到动画的发生！
- 最高边距：-22vw（台式机）、-46vw（平板电脑）、-70vw（手机）
- 底边距：7vw
最后的想法
在这篇文章中，我们向您展示了如何创建微妙的重叠动画。 这是一种很好的方式，可以引导访问者浏览您共享的内容，并使您的网站具有更高的外观和感觉。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
