起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：登錄框交互特效
今天分享一個(gè)登錄框的交互顯示特效~
一、效果顯示
二、制作過(guò)程
首先，我們創(chuàng)建一個(gè)動(dòng)態(tài)面板，新增2個(gè)面板，分別為“default：默認(rèn)顯示灰色邊框”，“onclick：點(diǎn)擊后顯示的藍(lán)色框”。
Default面板：
onclick面板：
onclick面板，可以看到是由2個(gè)元素組成，藍(lán)色的邊框和一個(gè)白色的色塊，白色色塊的作用是用于點(diǎn)擊后，使文字顯示區(qū)域的背景為白色。
下一步，我們?cè)趧?dòng)態(tài)面板上一層，輸入“電子郵件或手機(jī)號(hào)碼”的字段，并且命名為電子郵件或手機(jī)號(hào)碼：
下一步，創(chuàng)建交互動(dòng)作，點(diǎn)擊動(dòng)態(tài)面板，選擇“獲取焦點(diǎn)時(shí)”，在彈出頁(yè)面添加“設(shè)置文本”、“移動(dòng)”、“設(shè)置面板狀態(tài)”3個(gè)動(dòng)作。
設(shè)置文本設(shè)置：
移動(dòng)設(shè)置：
動(dòng)態(tài)面板設(shè)置：
完成動(dòng)態(tài)面板獲取焦點(diǎn)后的效果，我們繼續(xù)對(duì)動(dòng)態(tài)面板失去焦點(diǎn)后恢復(fù)原樣的效果進(jìn)行設(shè)置，參數(shù)與獲取焦點(diǎn)時(shí)相同。
完成以上設(shè)置，F(xiàn)5進(jìn)行預(yù)覽。
下載地址
https://pan.baidu.com/s/1pogT73PV9KaquB_FfBouSA
本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自作者
獲取焦點(diǎn)后，字體不能縮小是咋回事呢？我已經(jīng)分開(kāi)設(shè)置了默認(rèn)和點(diǎn)擊后的字體大小，但是點(diǎn)了確定之后，大小還是原來(lái)的大小，沒(méi)有改變，就像演示圖那樣
我也試了，加上輸入框的話跟這個(gè)效果就像有沖突一樣，實(shí)現(xiàn)不出來(lái)，可能得再思考一下
大哥，哪里能得到您的幫助
我尋思沒(méi)動(dòng)畫啊
如此操作的話，還是缺少輸入框呀