Axure技巧-交互樣式-鼠標懸停

AxureRP8.0教程 小樓一夜聽春語 6390℃ 0評論

這一篇教程給大家分享一個Axure中的技巧-交互樣式設置之鼠標懸停。

我們先來看一個效果。

上面這張圖片的動態效果,就是我們這篇教程的實現目標。

簡單的描述一下需要注意的內容,這也是我們實現最終效果的重要參考。

1、默認狀態下,圖標上方有半透明遮擋。

2、鼠標指針進入圖標時,圖標底部變暗,而上面大部分要比默認狀態更亮。

3、鼠標指針進入圖標時,底部顯示白色的文字。

4、鼠標指針離開時恢復原狀。

看到這里,大家不妨思考一下,這樣的交互效果,應該如何實現?

鼠標移入時隱藏原有遮罩層,顯示漸變遮罩層和文字,鼠標移出時再隱藏漸變遮罩層和文字,顯示原有遮罩層?

這種思路能夠實現,但是過于繁瑣。

此時,就是挑戰基本功的時候了。

解決方案:

1、制作圖標;

圖標的制作比較簡單,包括:

  • 紫色加粗的邊框①;
  • 黑色的背景顏色②;
  • 紫色的文字內容③。

2、制作遮罩層;

默認狀態,遮罩層是一個黑色半透明的矩形,不透明度為30%。

然后我們輸入文字,讓文字底部對齊①,并且取消文字的顏色②,這樣文字就看不見了。

3、添加交互樣式設置。

在剛剛做好的遮罩層的屬性中添加【交互樣式設置】,點擊【鼠標懸停】進行設置。

在打開的面板中設置【文字顏色】為白色①,設置【填充顏色】為漸變色②。

完成以上步驟之后,將遮罩層放到圖標上層重合的位置,即可預覽到想要效果。

最后,邀請大家關注微信訂閱號“iaxure”(二維碼在本站首頁右上方),及時獲取本站最新動態內容。

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


~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程,以獨有的教學方法與技巧,幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】


轉載請注明:Axure原創教程網 » Axure技巧-交互樣式-鼠標懸停

喜歡 (26)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 回復
辽宁快乐12选5走势图表