当您将鼠标悬停在父元素上时,使用悬停交互来显示子元素。
在这节视频课中,我们将介绍如何使用一个触发器元素,比如这个链接块,来影响它的子元素的动画(心形图标和淫秽的甜甜圈价格)。
我们分三步来做。建立动画使用时,悬停在,做同样的悬停在外,然后将其应用到所有不同的甜甜圈选项。
让我们从在动画中创建悬停开始。
我们会让链接阻止触发器。换句话说,当我们的链接块被选中时,我们将确保鼠标移过(当鼠标悬停在这个链接块上时),动画被触发。(当鼠标悬停在这个链接块上时,我们将播放我们将要创建的动画。)
一旦我们创建了这个新的动画,我们将给它一个名字,我们可以立即开始动画。让我们从抓住我们的心脏并向左移动开始。我们只是做了一个动作(或关键帧)将心脏向左移动。我们还希望确保这是初始状态(这是页面加载时心脏的位置)。
我们用类似的方法计算价格。选择价格后,我们可以设置它的初始状态,就像我们设置心脏的初始状态一样。只是我们要把它移到右边。
之后我们要做的是什么?就是让心脏和价格重回视野。我们可以同时在多个元素上做这个。我们只是按住shift,然后选择第二个元素。然后我们用右键或ctrl键来复制。
对于那个动画,我们想把每一个移动到原点。0像素。
如果我们现在按播放键,它就会起作用。它只是碰巧是无聊和线性的。为了缓和,让我们选择一些能使它平滑的东西。我们也可以减少持续时间,使进入稍微快一点。如果我们现在按播放键呢?现在看起来好多了。
如果我们进入预览模式,我们可以看到悬停时,它和我们预期的一样。但这只会发生一次。因为我们需要定义鼠标悬停时会发生什么。
这是在。我们来做悬停。
所以。让我们关闭我们刚刚创建的动画。这是我们为悬停制作的动画……让我们简单地复制它,以便在悬停时使用它。我们可以这样做,我们可以在这里复制它。完成之后,我们就可以开始配置了。
让我们从重命名开始。你想取什么名字都行。没有判断。本质上,对于动画,我们所做的就是将元素移回到它们的起始位置。我们可以删除之前做过的动画的最后一部分,因为没有理由移动任何东西到原点。
对于这两个,我们可以同时选择,只需要关闭初始状态。这意味着它们将从它们所处的位置动画回到它们在这里设置的位置(在链接块之外)。我们可以像之前那样调整放松,也可以调整持续时间。
这是什么意思呢?这意味着如果我们切换到预览模式,这个可以在悬停时起作用,也可以在悬停时起作用。但现在,它只对这一个元素有效。
我们把它应用到其他甜甜圈上。
我们怎么让它对其他人也起作用?首先,在两个动画(悬停和悬停)中,通过为每个元素选择任何动作(或关键帧),我们可以影响类。这很重要,因为我们还可以设置它来影响触发器的子节点。这意味着:当我们通过将鼠标悬停在链接块上来触发它时,它的子块(该链接块的子块)将会动画化。
我们想在两个动画上都这样做-这意味着我们必须在另一个动画上也这样做。一旦我们这样做了,我们可以关闭动画并确保我们触发了所有链接块上的这些动画所有的甜甜圈。
结果呢?我们有一个动画,当我们悬停在每个链接块完美的工作。
使用悬停交互来显示悬停的元素。
在这节课中:
提交表单时出错了。请联系support@www.raktarban.com