咳，大家下午好，歡迎來(lái)到濟(jì)南文匯軟件官網(wǎng)。近期兩天有雨，出門(mén)不要忘記帶雨傘~
今天分享一個(gè)input框的小動(dòng)畫(huà)
首先先分析一下
當(dāng)點(diǎn)擊input的時(shí)候，文字向上移動(dòng)。input框下面出現(xiàn)一個(gè)滑動(dòng)的線條，線條可以用一個(gè)i標(biāo)簽來(lái)寫(xiě)。偽元素來(lái)寫(xiě)也可以，具體用哪個(gè)，看心情。
先把結(jié)構(gòu)寫(xiě)好
然后編寫(xiě)css美化一下頁(yè)面
然后編寫(xiě)一個(gè)jq
當(dāng)點(diǎn)擊的時(shí)候字體變小，然后調(diào)整文字的位置。
剛才提到的i標(biāo)簽寬度設(shè)置為100%;時(shí)間設(shè)置的300毫秒，時(shí)間隨便設(shè)置，看心情。
當(dāng)失去焦點(diǎn)時(shí)，返回原樣。
編寫(xiě)完畢。
下周見(jiàn)，
Bye bye
關(guān)鍵詞:
