今天分享一個登錄框的交互顯示特效~

一、效果顯示

二、制作過程

首先，我們創(chuàng)建一個動態(tài)面板，新增2個面板，分別為“default：默認(rèn)顯示灰色邊框”，“onclick：點擊后顯示的藍色框”。

Default面板：

onclick面板：

onclick面板，可以看到是由2個元素組成，藍色的邊框和一個白色的色塊，白色色塊的作用是用于點擊后，使文字顯示區(qū)域的背景為白色。

下一步，我們在動態(tài)面板上一層，輸入“電子郵件或手機號碼”的字段，并且命名為電子郵件或手機號碼：

下一步，創(chuàng)建交互動作，點擊動態(tài)面板，選擇“獲取焦點時”，在彈出頁面添加“設(shè)置文本”、“移動”、“設(shè)置面板狀態(tài)”3個動作。

設(shè)置文本設(shè)置：

移動設(shè)置：

動態(tài)面板設(shè)置：

完成動態(tài)面板獲取焦點后的效果，我們繼續(xù)對動態(tài)面板失去焦點后恢復(fù)原樣的效果進行設(shè)置，參數(shù)與獲取焦點時相同。

完成以上設(shè)置，F(xiàn)5進行預(yù)覽。

下載地址

https://pan.baidu.com/s/1pogT73PV9KaquB_FfBouSA

本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自作者