天天看点

Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录

博客概要

     分享利用Axure制作的鼠标悬停-字体变色效果~

文章目录

    • 博客概要
  • Axure RP8-实战案例_总目录
    • 鼠标悬停-字体变色
    • 制作过程
      • 1.搭建页面
      • 2.鼠标移入交互
      • 3.鼠标移出交互
      • 4.效果展示
    • 总结

Axure RP8-实战案例_总目录

文章超链接:https://blog.csdn.net/qq_41386332/article/details/109445644

鼠标悬停-字体变色

Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录
解释 一种常见的字体交互动态效果
效果 鼠标悬停字体发生颜色的变化
【PS】

1.本次制作,样式简洁,请按需,自行美化

2.有多种制作方式,此次至制作了其中之一,其余后续分享

制作过程

1.搭建页面

Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录

     利用“矩形”、“图片”、“文本”等元件,搭建整体页面结构。

2.鼠标移入交互

Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录
Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录

     按步骤进行相应的交互设置:

  1. 选中要进行设置的“文本”元件
  2. 在属性一栏选择设置“交互”下的“鼠标移入时”的用例
  3. 选择“添加动作”一栏的“设置文本”
  4. 勾选“配置动作”中要设置的元件
  5. 在“设置文本”一栏,下拉选择“富文本”
  6. 选择点击“编辑文本”,进入“文本编辑窗口”
  7. 在“文本编辑窗口”选中要编辑的文本,选择“字体颜色”一栏,下拉选择相应的颜色
  8. 点击“确定”,可以在“属性”的“交互”一栏中看到相应的变化

3.鼠标移出交互

Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录
Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录

     按步骤进行相应的交互设置,步骤与“移入”设置差不多,仅仅就在“选择颜色”的时候略有区别。

4.效果展示

Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录
Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录
Axure—鼠标悬停-字体变色Axure RP8-实战案例_总目录

     鼠标悬停,字体变色,鼠标移出,字体恢复颜色。

总结

以上= =“字体鼠标悬停变色”技能点get~