博客概要
分享利用Axure制作的鼠标悬停-字体变色效果~
Axure RP8-实战案例_总目录
文章超链接:https://blog.csdn.net/qq_41386332/article/details/109445644
鼠标悬停-字体变色
![](https://i-blog.csdnimg.cn/blog_migrate/28095af621dc5026a2c33b9063c74be2.jpeg)
解释 | 一种常见的字体交互动态效果 |
---|---|
效果 | 鼠标悬停字体发生颜色的变化 |
【PS】 | 1.本次制作,样式简洁,请按需,自行美化 2.有多种制作方式,此次至制作了其中之一,其余后续分享 |
… | … |
制作过程
1.搭建页面
![](https://i-blog.csdnimg.cn/blog_migrate/d48f75e57fc9e3920c76343e3f87c5f5.jpeg)
利用“矩形”、“图片”、“文本”等元件,搭建整体页面结构。
2.鼠标移入交互
![](https://i-blog.csdnimg.cn/blog_migrate/a5108b9e112fccfb33b3fc8f9cde6023.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/8d04c0f99f686475e2e39e66d59d18f2.jpeg)
按步骤进行相应的交互设置:
- 选中要进行设置的“文本”元件
- 在属性一栏选择设置“交互”下的“鼠标移入时”的用例
- 选择“添加动作”一栏的“设置文本”
- 勾选“配置动作”中要设置的元件
- 在“设置文本”一栏,下拉选择“富文本”
- 选择点击“编辑文本”,进入“文本编辑窗口”
- 在“文本编辑窗口”选中要编辑的文本,选择“字体颜色”一栏,下拉选择相应的颜色
- 点击“确定”,可以在“属性”的“交互”一栏中看到相应的变化
3.鼠标移出交互
![](https://i-blog.csdnimg.cn/blog_migrate/0850f008fe0a6036abb382c2b474535b.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/6a29f99147bab1f6c0e1d3fac3327d1a.jpeg)
按步骤进行相应的交互设置,步骤与“移入”设置差不多,仅仅就在“选择颜色”的时候略有区别。
4.效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/2ba69fe613c8aa6fbc46eeb6dc327824.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/dcd6e060eb7ac8028236b2f55cf5f489.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/2ba69fe613c8aa6fbc46eeb6dc327824.jpeg)
鼠标悬停,字体变色,鼠标移出,字体恢复颜色。
总结
以上= =“字体鼠标悬停变色”技能点get~