Axure教程:跟随鼠标移动的导航菜单特效

本篇教程将展示如何使用Axure制作一个可以跟随鼠标移动导航菜单特效,enjoy~

 

Axure教程:跟随鼠标移动的导航菜单特效一、最终效果

Axure教程:跟随鼠标移动的导航菜单特效

二、制作过程

我们先了解一下本教程中用到的元素:菜单按钮+菜单背景+跟随背景移动的色块。

Axure教程:跟随鼠标移动的导航菜单特效

下面我们开始制作,首先将菜单按钮+菜单背景+跟随背景移动的色块排列至固定位置。

如下图所示:

Axure教程:跟随鼠标移动的导航菜单特效

在这里大家可能发现:同时出现了三个蓝色背景块,我们这么做,主要是为了方便记录鼠标移动后色块移动的位置。

A:225×200 / B:385×200 / C:515×200。

记录完成后,我们只保留第一个蓝色背景块,删除其他的;并且将蓝色背景的原件名称定义为“背景”。

Axure教程:跟随鼠标移动的导航菜单特效

下一步,我们开始制作交互操作。

选择“HOME”按钮,在右侧交互栏,双击“鼠标移入时”,按下图设置,这里需要注意一点,“移动”选项需要选择“绝对位置”,坐标值按照我们记录的录入,X:225 / Y:200。

Axure教程:跟随鼠标移动的导航菜单特效

使用同样的方法,对“order”&“account”2个按钮进行设置,并且将坐标值分别设置为X:385 / Y:200 和 X:515 / Y:200。

完成上述设置后,我们已经实现了鼠标移动会出现跟随的背景色块功能。

Axure教程:跟随鼠标移动的导航菜单特效

下一步,我们来设置点击后的圆角特效。首选选择蓝色色块,在右侧属性面板,点击“鼠标按下”,在弹出的面板里,勾选“圆角半径”,将值设为“50”。

Axure教程:跟随鼠标移动的导航菜单特效

设置完成后,F5进行预览,就可以看到最终效果了。

Axure教程:跟随鼠标移动的导航菜单特效

本文为@运营喵原创,运营喵专栏作者。

(1)
运营喵的头像运营喵官方
上一篇 2018-12-01 17:34
下一篇 2018-12-13 19:34

发表回复

登录后才能评论
公众号
公众号
返回顶部
运营喵VIP会员,畅学全部课程,点击查看 >