多语言展示
当前在线:1810今日阅读:27今日分享:41

Axure原型工具制作图片从虚化到明亮与放大效果

我们在浏览一些旅游景点的网站时,鼠标放到某个景点图片上的时候,这个图片就会放大,并且从原来的虚化变的更加明亮,那么这个效果是如何实现的呢,小编介绍一下如何通过Axure原型工具制作图片从虚化到明亮与放大效果
工具/原料
1

电脑

2

Axure

方法/步骤
1

首先创建一个空白页面,在工作区域内拖入本次使用的元件元素,主要是图片和矩形,如下图所示。

2

将图片导入后,将图片和矩形的名称进行命名,如下图所示,后面做交互的时候能够知道每一个元件代表的含义。

3

将矩形的透明度及颜色进行设置,并将矩形覆盖到图片的上面,如下图所示。

4

然后开始做矩形的鼠标移入时的交互事件效果,主要是图片的放大,以及对透明度值的修改,如下图所示。

5

然后再对矩形的鼠标移出时的交互事件效果进行设置,同上样的方式一样,只不过是将图片的大小和透明度恢复到原始状态,如下图所示。

6

所有工作准备完成,f5预览一下效果,如下图所示。

7

页面加载时,图片很虚的样式,当鼠标移到图片上方的时候,图片会放大,且变的明亮,这就是我们上边对交互事件的一个控制效果。

注意事项
1

这个效果实现比较简单,可以举一反三,实现更多其他效果

2

如果有疑问,可以关注小编一起交流互动

推荐信息