Axure技巧-交互样式-鼠标悬停

AxureRP8.0教程 小楼一夜听春语 4169℃ 0评论

这一篇教程给大家分享一个Axure中的技巧-交互样式设置之鼠标悬停。

我们先来看一个效果。

上面这张图片的动态效果,就是我们这篇教程的实现目标。

简单的描述一下需要注意的内容,这也是我们实现最终效果的重要参考。

1、默认状态下,图标上方有半透明遮挡。

2、鼠标指针进入图标时,图标底部变暗,而上面大部分要比默认状态更亮。

3、鼠标指针进入图标时,底部显示白色的文字。

4、鼠标指针离开时恢复原状。

看到这里,大家不妨思考一下,这样的交互效果,应该如何实现?

鼠标移入时隐藏原有遮罩层,显示渐变遮罩层和文字,鼠标移出时再隐藏渐变遮罩层和文字,显示原有遮罩层?

这种思路能够实现,但是过于繁琐。

此时,就是挑战基本功的时候了。

解决方案:

1、制作图标;

图标的制作比较简单,包括:

  • 紫色加粗的边框①;
  • 黑色的背景颜色②;
  • 紫色的文字内容③。

2、制作遮罩层;

默认状态,遮罩层是一个黑色半透明的矩形,不透明度为30%。

然后我们输入文字,让文字底部对齐①,并且取消文字的颜色②,这样文字就看不见了。

3、添加交互样式设置。

在刚刚做好的遮罩层的属性中添加【交互样式设置】,点击【鼠标悬停】进行设置。

在打开的面板中设置【文字颜色】为白色①,设置【填充颜色】为渐变色②。

完成以上步骤之后,将遮罩层放到图标上层重合的位置,即可预览到想要效果。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

源文件下载:http://downloads.iaxure.com/case_icon.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » Axure技巧-交互样式-鼠标悬停

喜欢 (22)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 少一步哦。
    Arthur2018-05-21 09:46 回复
    • 小楼一夜听春语
      少什么了?
      小楼一夜听春语2018-05-21 14:58 回复
  2. 做的时候吧遮罩层的透明度改了,发现底下的字体也变模糊了,检查后发现原来是改背景色的透明度,童鞋们避坑。。。
    独行侠2018-05-21 14:49 回复
    • 小楼一夜听春语
      emmm,你改了样式中的透明度是吧,那个是对形状文字都生效的,所以不能改那个。
      小楼一夜听春语2018-05-30 21:39 回复
  3. 好像真的少了一步 没有出来的效果
    Vicky2018-05-30 17:50 回复
    • 小楼一夜听春语
      一步也不少,自己对比源文件看看。
      小楼一夜听春语2018-05-30 21:38 回复
  4. 确实能实现,谢谢!
    小熊2018-06-04 17:47 回复
  5. 楼主 那个 底部的字体是怎么加的哇 ? 不会 ➡
    lu~2018-06-29 16:49 回复
  6. 注意遮罩层鼠标悬浮时的填充颜色为白色,第一次时设置为黑色了,效果是悬浮时遮了一层黑色的 ➡
    2018-07-30 10:07 回复
  7. 做这招层的时候文字颜色是黑色的,不是取消颜色吧
    扣扣2018-09-11 16:44 回复