回到所有的课程
课程库

悬停时显示元素

当您将鼠标悬停在父元素上时,使用悬停交互来显示子元素。

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆这个项目

使用悬停交互来显示悬停的元素。

在这节课中:

  1. 建立一个动画悬停
  2. 建立一个动画悬停
  3. 将动画应用到其他元素上

建立一个动画悬停

  1. 选择你的链接块(使其成为触发器)
  2. 在交互面板中,单击Element Trigger旁边的加号,并从下拉菜单中选择鼠标悬停
  3. 在悬停状态下,从动作菜单中选择启动动画
  4. 单击时间动画旁边的加号
  5. 说出它的名字(例如,Fly in)
  6. 选择你想要动画的元素(例如,Heart元素)
  7. 单击Timed Actions旁边的加号,从下拉菜单中选择Move
  8. 在Move下,给x轴一个值(例如,-100)
  9. 在“计时”旁边,将开关切换到“设置为初始状态”
  10. 重复步骤6到9为其他你想要动画的元素
  11. 交互面板,(点击shift)并选择时间轴中的元素
  12. 右击复制
  13. 在移动下,改变x轴回到原点(0像素)
  14. 在“计时”下,更改“缓动”(例如,改为“缓出”)
  15. 减少持续时间(例如,0.2秒)

建立一个动画悬停

  1. 单击退出刚刚构建的动画
  2. 在“悬停”下的交互面板中,从“动作”菜单中选择“开始动画”
  3. 在定时动画下,点击飞入旁边的齿轮图标,选择复制
  4. 激活Fly in 2
  5. 重新命名(例如,飞出神奇)
  6. 从时间轴上删除重复的动画(例如,心和H3价格)
  7. 选择时间轴中剩余的动画
  8. 在“定时”旁边,关闭“设置为初始状态”
  9. 调整缓和和持续时间


将动画应用到其他元素上

  1. 在时间轴中选择任意一个Timed Actions
  2. 在“影响”旁边选择“类”
  3. 单击带有这个类的所有元素,并选择带有这个类的Only children
  4. 重复1-3悬停和悬停动作

尝试Webflow——它是免费的
Baidu
map