欢迎来到这个由6部分组成的系列文章的第1部分，它将教你如何使用Divi的新“动画”选项设计出色的页面板块。我将向你介绍如何构建实时演示页面的不同部分，以向你展示向网站添加动画的技术。动画功能确实很有趣并且易于使用。借助VisualBuilder，你可以看到自己的创作在每个阶段都栩栩如生。快来加入我的行列，探索Divi动画的力量。动画可以使页面栩栩如生。如果使用得当，用户将变得更加投入并更倾向于浏览页面上的内容。如果做得不好，动画会完全分散用户的注意力，并使他们陷入茫然的失望状态。当用户向下滚动页面时，动画的速度，时间和强度在这种移动交响中都起着重要作用。Divi的高级动画功能使你可以将动画添加到网站的任何元素。你可以结合这些动画元素来创建无数的运动组合，使你的部分栩栩如生。在本系列的第1部分中，我将向你展示如何使用视觉生成器来构建和演示实时演示页面的前两部分，以展示Divi动画的强大功能。让我们开始吧。这是我们在本系列文章中的内容预览系列的第1章第一部分第二部分系列的第二章第三部分第四部分系列的第3章第5部分系列的第4章第6部分系列的第5章第7部分系列的第6章第8部分第9部分准备设计元素对于第一部分，你将需要两个图像。第一个是你的全屏背景图片，尺寸约为×。这是我正在使用的一个：第二张图像是同一图像的编辑版本，已被垂直翻转并朝底部逐渐淡出。第二张图片将作为你的主要标题的背景，并且应为×左右。要创建上下颠倒的图像，请在“预览”中打开图像，然后选择“工具”“垂直翻转”，或在Photoshop中打开图像，选择“图像”“图像旋转”“垂直翻转画布”。为了将淡出效果添加到图像的底部，我在画笔模式下使用了橡皮擦工具，大小为px，硬度为0％。然后我按住shift键并沿着底部边缘拖动画笔。确保将其导出为png文件。如果你没有Photoshop，则可以尝试使用免费的照片编辑解决方案（如gimpshop）来完成许多相同的设计编辑。如果你不知道如何使用照片编辑软件（此时并不在意学习），请随时保留第二张图片，或使用下面的图片（将其拖到你的桌面）。对于第二部分，你将需要两个图像。第一个应该是大约×。第二个应该是×左右，如下图所示。了解动画术语如果还没有，请继续阅读功能介绍中介绍高级动画的更新。在文章的结尾，为你提供了有用的定义/描述，你可以在整个构建器中找到每个动画功能。了解这些动画功能的实际作用对于创建过程很重要。了解这些动画功能是什么之后，让我们开始吧。添加新页面设置在WordPress信息中心中，转到页面添加新内容。然后在页面上添加标题。接下来，在页面右上角的框中找到Divi页面设置，然后选择“点导航”为“ON”。在页面属性框中，为页面模板选择空白页面。最后，单击“使用DiviBuilder”按钮并部署VisualBuilder以开始构建布局。构建第1部分：全屏标题设计和动画该标题部分的行为与设置为全屏的全宽标题模块非常相似。换句话说，当站点加载时，无论窗口大小如何，该部分都将填充浏览器窗口的整个宽度和高度。但是，我们将使用标准部分并将高度设置为vh，而不是使用全宽标题模块。这样，我们可以在其中添加一个文本模块。使用VisualBuilder，在启动构建器时单击以编辑默认情况下已显示的标准部分的部分设置。更新以下内容：在内容标签下…
背景图片：[输入你的×背景图片]
使用视差效果：是
视差方式：真视差
在设计标签下…
自定义填充：顶部5％，右侧0px，底部5％，左侧0px
在高级标签下…在“主要元素”框中添加以下自定义CSS：
min-height:vh这一行css告诉该部分显示％的视窗高度。保存设置接下来，将单列结构插入行中，并将文本模块添加到列中。更新文本模块设置，如下所示：在内容标签下…只需在内容框中添加单词“Divi”。在设计标签下…
文字字体：Oswald，大写（TT）
文字字型大小：14px
文字文字颜色：＃e
文字字母间距：1.5em
文字方向：居中
自定义边距：2％
动画样式：翻转
动画重复：一次
动画方向：向右
动画时间：ms
动画延迟：1ms
动画强度：％
动画起始不透明度：0％
动画速度曲线：缓入缓出
请暂停一分钟，以便我向你展示手动添加此相似动画所需的。这是动画所需的带有内联样式的html：
divclass="et_animatedflipLeft"style="position:absolute;animation-duration:ms;animation-delay:1ms;opacity:0;animation-timing-function:ease-in-out;transform:perspective(px)rotateY(-90deg);"divstyle="position:relative;"Divi/div/div这是动画所需的CSS：keyframeset_pb_flipLeft{from{transform-origin:center}to{opacity:1;transform:rotateY(0)}}.et_animated.flipLeft{animation-name:et_pb_flipLeft}.et_animated{animation-fill-mode:both!important;}并且其中不包含在浏览器窗口中显示动画时激活动画所需的代码。不管怎么说，拥有这些内置的动画功能可以节省大量时间。而且，在编辑动画选项时能够实时观看动画。现在，让我们继续更新文本模块设置：在高级标签下…将以下行的CustomCSS添加到MainElement框中：
text-indent:1.5em保存设置接下来，直接在刚创建的文本模块下添加另一个文本模块，并如下更新设置：在内容标签下…在内容框的文本选项卡中添加以下html：
pspanBelieving/spanbr/isSeeing/p在设计标签下…
文字颜色：浅
文字字体：Oswald，大写（TT）
文本字体大小：8vw（你必须输入此值；这使字体大小为视窗宽度的8％）
文字文字颜色：rgba（,,,0.79）
文字行高：1.4em
文字方向：居中
动画风格：折叠
动画方向：向上
动画时间：1ms
动画延迟：0ms
动画强度：60％
保存设置这种动画效果会通过将其从看似平坦的位置折叠（或竖立）来显示主要标题。既然我们已经完成了主要标题文本的制作，那么我们将倒置的背景图像添加到该行中。现在转到包含刚创建的两个文本模块的行的“行设置”，并如下更新设置：在内容标签下…
背景图片：[插入你的×图片]
背景图片大小：适合
背景图片位置：居中
背景图像重复：不重复
在设计标签下…
使用自定义宽度：是
单位：％
自定义宽度：50％
自定义填充：顶部12％，右侧0％，底部5％，左侧0％
动画样式：滑动
动画方向：向上
动画延迟：ms
动画强度：20％
这种动画效果使图像向上滑动，几乎就像是从山后升起一样。第一部分就是这样设置。让我们看看我们的最终设计和动画。此处的三个动画元素包括“行”（向上滑动），带有文本“BelievingisSeeing”的文本模块（从中心折叠）和带有“Divi”文本的文本模块（已延迟）在其他元素停止后向右翻转）。这种组合确实可以通过有针对性和及时的方式展示不同的内容来吸引访问者。构建第2部分动画演示页面的第二部分展示了一种微妙但非常酷的方式来显示页面内容。实际上，乍一看几乎不可能识别所有运动。要构建第二部分，请在上一部分下面添加一个常规部分。在此部分中添加两列（二分之一）。在左列中，添加具有以下设置的文本模块：在内容标签下…在内容框的文本选项卡中输入以下html：
h1Timeismoney/h1pspanLoremipsumdolorsitamet,consecteturadipiscingelit.Phasellushendreritpretiumfelis,sitametsollicitudinerosdignissimat.Crasmolestienislenim./span/p在设计标签下…
文字颜色：浅
文字字体：蒙特塞拉特
文字字型大小：18px
文字行高：1.8em
标题字体：蒙特塞拉特，粗体（B），大写（TT）
标题字体大小：39px（桌面）
标题行高度：2.2em
底边距：50px
动画样式：滑动
动画方向：向上
动画强度：10％
这种动画效果将通过向上滑动到视图中来显示文本块。保存设置接下来，在刚创建的“文本”模块下添加一个按钮模块。更新按钮模块设置，如下所示：在内容标签下…
按钮文字：了解更多
按钮网址：＃（或任何你想要的网址）
在设计标签下…
按钮对齐：向左
文字颜色：浅
对按钮使用自定义样式：是
按钮文字大小：15px
按钮边框半径：0
按钮字母间距：3px
按钮字体：蒙特塞拉特，粗体（B），大写（TT）
显示按钮图标：是
自定义填充：顶部10像素，右侧30像素，底部10像素，左侧30像素
动画样式：滑动
动画方向：向下
动画延迟：ms
动画强度：10％
为了平衡上述上一文本的效果，此动画效果将通过稍微延迟将其向下滑入视图来显示该按钮。你目前看不到你的文字和按钮，因为它目前是白色背景上的白色文字。没关系。我们将尽快添加背景。接下来，将分隔器模块添加到右列。然后，如下更新设置：在设计标签下…
高度：px
在高级标签下…
禁用桌面上的可见性
在此处添加分隔线将有助于背景图像在移动设备上保持可见。保存设置现在，将背景添加到每个列中。转到行设置并更新以下内容：在内容标签下…
第1栏背景渐变颜色：＃fe，rgba（,78,78,0.9）
第1列的渐变方向：度
第2列背景图片：[输入你的×图片]
第2列背景图片位置：左上
第2列背景图片重复：不重复
在设计标签下…
使用自定义宽度：是
自定义宽度：px
使用自定义装订线宽度：是
装订线宽度：1
均衡列高：是
自定义填充：顶部为0px，右侧为0px，底部为0px，左侧为0px
第1栏自定义填充：顶部5％，右侧7％，底部5％，左侧7％
动画风格：折叠
动画方向：向上
动画时长：ms
该动画效果将折叠（或竖立）到视图中以显示整行。在高级标签下…将以下“自定义CSS”添加到“主元素”框中：
box-shadow:-20px0px60px-20pxrgba(,,65,0.88);保存设置接下来，在刚完成创建的行下面添加一个两列（三分之一的三分之二）行。在左列中添加分隔器模块，并如下更新设置：在设计标签下…
高度：像素
在高级标签下…
禁用桌面上的可见性
在此处添加分隔线将有助于背景图像在移动设备上保持可见。保存设置为了节省时间，请继续并右键单击并在上方行的左列中复制文本模块，其中包含“时间就是金钱”文本。然后将其粘贴到下面的行的右（三分之二）列中。更新新的文本模块设置，如下所示：在内容标签下…在内容框中将h1标题文本更改为“像Pro一样通勤”。在设计标签下…
文字文字颜色：＃a8a8a8
标题文字颜色：＃
动画样式：滑动
动画方向：向下
动画强度：10％
这种动画效果通过将文本块向下滑动到视图中来显示文本块。现在，右键单击并将按钮模块复制到上一行的左列中，并将其粘贴到刚完成编辑的文本模块下。如下更新按钮模块设置：
按钮文字颜色：＃ff
按钮边框颜色：＃ff
按钮悬停文字颜色：＃ff
保存设置对于最后一步，通过更新以下内容来编辑行设置：在内容标签下…
背景颜色：#ffffff
第1列背景图片：[插入×图片]
第1列背景图片位置：左上方
第1列背景图片重复：不重复
第2列背景渐变颜色：rgba（,,,0.91），#ffffff
第2列的渐变方向：deg
在设计标签下…
使用自定义宽度：是
自定义宽度：px
使用自定义装订线宽度：是
装订线宽度：1
均衡列高：是
自定义填充：顶部为0px，右侧为0px，底部为0px，左侧为0px
第2栏自定义填充：顶部5％，右侧7％，底部5％，左侧7％
动画风格：折叠
动画方向：向下
动画时长：ms
该动画效果将其向下折叠以显示整行。在高级标签下…在“主要元素”框下添加以下自定义CSS：
box-shadow:px90px-35pxrgba(0,0,0,.3);这是本部分的内容。你可以查看结果。因为本部分的动画和设计元素很精巧，所以我认为这是可以在大多数页面上使用的那种设计和动画的一个很好的例子。顶部和底部的行打开时就像从后面看书打开一样。文本和按钮在最上面一行略微向上移动，在最下面一行略微向下移动。下载这些部分以便轻松导入在爱极致云
