快好知 kuaihz

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

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

一、最终效果

二、制作过程

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

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

如下图所示:

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

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

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

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

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

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

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

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

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

三、源文件下载

https://pan.baidu.com/s/1lRPnYgnEEMEkcoP5dIcpQw

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:跟随  跟随词条  特效  特效词条  菜单  菜单词条  鼠标  鼠标词条  移动  移动词条  
原型

 Protopie实战教程:rad...

如何实现radio单选框在任何Web和APP应用中的效果,一起来文中看看~radio单选框在任何Web和APP应用中都非常常见,效果如下:操作步骤:(1)从Sk...(展开)

原型

 AxureRP基础教程篇:15个...

本文总结了15个很有帮助的Axure使用技巧,希望你看了之后能有所收获。注意:本文基于Axure英文版写作,对于那些我不知道该如何翻译的供功能和名称,只好直接给...(展开)