如何用Mockplus做鼠标悬停时菜单下拉的效果?

 时间:2026-02-14 21:08:08

1、第一步:用矩形做一个菜单。

打开Mockplus,从界面左侧的组件库中拖出一个矩形,将其复制成多个。其中一个作为菜单的显示区域(图中蓝色矩形),另外几个拼接起来作为菜单的内容。

在右侧参数面板中,将第一个矩形设置为不可见。然后将另外几个矩形合并为组。

如何用Mockplus做鼠标悬停时菜单下拉的效果?

2、第二步:移动矩形

将蓝色矩形移动到不可见矩形的位置,并在右侧参数面板中将蓝色矩形下移一层,此时依然可以看到蓝色矩形,因为上层的形状是不可见的。

如何用Mockplus做鼠标悬停时菜单下拉的效果?

3、第三步:利用状态交互,实现鼠标悬停时菜单下拉的效果。

在界面右侧的参数面板上,将透明度设置为0,并点击“透明度”前的小闪电。选择“鼠标经过时”,透明度设置为100。

如何用Mockplus做鼠标悬停时菜单下拉的效果?

4、这样,一个简单的鼠标悬停下拉菜单就做好了。

点击界面上方的“预览”,即可查看效果。

如何用Mockplus做鼠标悬停时菜单下拉的效果?

  • 品牌定位的三维匹配模型方法
  • 图片的交叉缩放效果怎么制作
  • Edius9如何开启立体模式进行素材文件立体调整
  • PR利用knoll light factory插件添加点光效果
  • 刀塔自走棋怎么安装 怎么安装刀塔自走棋
  • 热门搜索
    宁波诺丁汉大学怎么样 怎么瘦双下巴 蛋糕粉怎么做蛋糕 肠鸣是怎么回事 车辆年检过期怎么办 上官婉儿怎么飞天连招 康普顿机油怎么样 我的世界怎么刷东西 银行卡被盗刷怎么办 辞呈怎么写