当前位置:首页 / 运营推广 / 交互体验 / Protopie教程:跟随鼠标移动的导航菜单特效
Protopie教程:跟随鼠标移动的导航菜单特效
发布时间:2022/07/08来源:我是产品

一、最终效果

二、触发介绍

三、制作过程

完成图层创建后,我们对鼠标移动到按钮上,焦点背景跟随鼠标移动的特效。

点击“菜单A”图层,在触发面板选择“鼠标悬浮”,同时在该触发效果下选择“移动”选项,并且将坐标值设置为“X:88 / Y:80.75”。使用相同的方法,对“菜单B”和“菜单C”进行设置,坐标轴分别为:“X:187.5 / Y:80.75”和“X:287 / Y:80.75”。

完成以上设置,我们可以看到跟随鼠标移动的导航特效已经完成。

下一步我们来制作点击按钮后,焦点背景圆角变化的特效。这里我们会用到“下击”、“抬起”2个动作来模拟“鼠标点击”和“松开鼠标”的动作。

选择“菜单A”图层,在触发面板选择“下击”,同时在该触发效果下选择“圆角”选项,并且将圆角值设置为50。

完成了模拟鼠标点击的特效,下一步我们使用相同的方法完成鼠标抬起的特效。选择“菜单A”图层,在触发面板选择“抬起”,同时在该触发效果下选择“圆角”选项,并且将圆角值设置为5。

使用“菜单A”相同的设置去设置“菜单B”“菜单C”,设置完成后,就可以看到最终的演示效果。

百度网盘:https://pan.baidu.com/s/16s_Er_UrAUZphfvLPv_qBQ

分享到:
免责声明:本文仅代表文章作者的个人观点,与本站无关,请读者仅作参考,并自行核实相关内容。文章内容来源于网络,版权归原作者所有,如有侵权请与我们联系,我们将及时删除。
资讯推荐
热门最新
精品工具
全部评论(0)
剩余输入数量90/90
暂无任何评论,欢迎留下你的想法
你可能感兴趣的资讯
换一批