本篇文章給大家?guī)?lái)了關(guān)于CSS的相關(guān)知識(shí)，其中主要介紹了怎么用CSS實(shí)現(xiàn)一個(gè)簡(jiǎn)單又高大上的輸入框，手把手教你哦~下面一起來(lái)看一下吧，希望對(duì)需要的朋友有所幫助。

一個(gè)商務(wù)簡(jiǎn)約的登陸界面

前幾天在逛codepen的時(shí)候，發(fā)現(xiàn)了一個(gè)很有意思的登陸界面，于是就想著自己實(shí)現(xiàn)一下，于是就有了這個(gè)demo。
順便將接下來(lái)網(wǎng)站的登陸界面也改成這個(gè)樣式了。

先上一個(gè)效果圖：

在效果圖里面我們看到有兩個(gè)輸入框，一個(gè)為文本輸入框，一個(gè)為密碼輸入框。
由于兩個(gè)輸入框的樣式大體差不多，所以我們只講述第一個(gè)輸入框的實(shí)現(xiàn)。

1.輸入框結(jié)構(gòu)

實(shí)際上，這個(gè)輸入框有兩部分組成：
分別是輸入框的提示內(nèi)容和輸輸入框本體。

我們將輸入框的提示內(nèi)容放進(jìn)label標(biāo)簽中，并且給label標(biāo)簽添加一個(gè)for屬性，值為輸入框的id屬性值。

這樣用戶在點(diǎn)擊提示語(yǔ)句時(shí)，光標(biāo)會(huì)自動(dòng)聚焦到輸入框中。

    <div class="user_name">         <label for="userName" class="userNameTip">請(qǐng)輸入您的用戶名</label>         <input type="text" id="userName">     </div>

到此為止，我們輸入框的結(jié)構(gòu)就搭建好了。

2.輸入框樣式

我們先給整個(gè)大盒子添加一個(gè)相對(duì)定位，方便后續(xù)我們對(duì)里面元素的位置調(diào)整。順便設(shè)置一個(gè)整個(gè)盒子的大小。

    .user_name {         position: relative;         width: 400px;         height: 200px;     }

接下來(lái)我們就給輸入框改變一個(gè)樣式，畢竟這樣一個(gè)默認(rèn)的框框?qū)嵲谔y看了。

.user_name{             width: 200px;             height: 50px;             position: absolute;             top: 50px;     left: 30px;             font-size: 20px;     }

這里我們首先給整個(gè)輸入框的整體調(diào)整一個(gè)位置，然后設(shè)置一個(gè)字體大小，這樣我們的輸入框就有了一個(gè)基本的樣式。

下面就開(kāi)始設(shè)置輸入框的樣式：

#userName{     display: inline-block;     width: 300px;     height: 30px;     color: #0FF;     font-size: 20px;     border: 0px transparent;     border-bottom: 2px solid #fff;     background-color: rgb(54, 54, 54); }

在這里我們?cè)O(shè)置了輸入框的寬度，高度，字體顏色，字體大小，邊框，背景顏色。

因?yàn)槲掖藭r(shí)整個(gè)大背景顏色為rgb(54, 54, 54),為了不讓這個(gè)輸入框這么突出沒(méi)所以我設(shè)置了輸入框的背景顏色與大背景顏色為一樣的顏色。

但是這樣還不夠，因?yàn)樵谳斎肟颢@得焦點(diǎn)的時(shí)候，輸入框外邊還有一個(gè)邊框，這樣會(huì)使得輸入框很丑。

通過(guò)outline屬性我們可以設(shè)置輸入框獲得焦點(diǎn)時(shí)的邊框樣式。
在效果圖中，我們可以看見(jiàn)輸入框獲得焦點(diǎn)時(shí)，輸入框下邊有一個(gè)藍(lán)色的邊框，這個(gè)邊框的寬度為2px，顏色為#0FF。

我們我們這樣給輸入框來(lái)一個(gè)樣式：

#userName:focus{     outline: none;     border-bottom: 2px solid #0FF; }

這樣輸入框的樣式就出來(lái)了：

3.輸入框提示語(yǔ)

在效果圖里面輸入框還未獲得焦點(diǎn)的時(shí)候，提示語(yǔ)句在輸入框里面的，這個(gè)就是我們使用絕對(duì)定位來(lái)實(shí)現(xiàn)的，調(diào)整到合適的位置，將提示語(yǔ)句放在輸入框里面。
并且此時(shí)文字的顏色為白色。

.userNameTip{     position: absolute;     top: 0px;     left: 0px;     font-size: 20px;     color: #fff; }

最后這整個(gè)輸入框的樣式就是這樣：

當(dāng)然現(xiàn)在這是一個(gè)靜態(tài)的輸入框，沒(méi)有任何的交互，我們接下來(lái)就來(lái)實(shí)現(xiàn)這個(gè)輸入框的交互。

4.輸入框交互

交互肯定需要一個(gè)動(dòng)畫來(lái)實(shí)現(xiàn)，這里我們發(fā)現(xiàn)在輸入框獲得焦點(diǎn)之后，提示文字會(huì)變小，顏色也會(huì)隨之改變，然后移動(dòng)到輸入框的上方，這個(gè)就是我們需要實(shí)現(xiàn)的效果。

失去焦點(diǎn)之后,我們就會(huì)判斷，這個(gè)輸入框里面是否有內(nèi)容：
如果有內(nèi)容的話，動(dòng)畫就不移除，一直保持動(dòng)畫的結(jié)束狀態(tài)；如果沒(méi)有內(nèi)容，就移除動(dòng)畫回到初識(shí)狀態(tài)。

那么我們定義一個(gè)動(dòng)畫：

@keyframes user {     from{         top: 0px;         font-size: 20px;     }         to{             top: -20px;             font-size: 12px;             color: #0FF;     } }

現(xiàn)在有一個(gè)問(wèn)題，我們點(diǎn)擊輸入框，最后將這個(gè)動(dòng)畫添加到輸入框的提示語(yǔ)句上，那么我們?nèi)绾螌?dòng)畫添加上去呢？

我這里使用的jquery中對(duì)class的操作來(lái)實(shí)現(xiàn)，也就是利用jQuery中的addClass()和removeClass()方法來(lái)實(shí)現(xiàn)。

那么在此之前，我們就需要先將動(dòng)畫寫進(jìn)一個(gè)類里面，然后通過(guò)jQuery來(lái)操作這個(gè)類。

我這里簡(jiǎn)單的寫了一個(gè)class，然后將動(dòng)畫寫進(jìn)去：

.userNameTipA{     animation: user 0.3s linear normal forwards;     animation-iteration-count: 1; }

然后我們就可以通過(guò)jQuery來(lái)操作這個(gè)類了：

$('#userName').focus(function () {     $('.userNameTip').addClass('userNameTipA');         console.log("點(diǎn)擊了"); }) $('#userName').blur(function () {     let val = $('#userName').val();     if (val) {         return;     } else {         $('.userNameTip').removeClass('userNameTipA');     } });

最后點(diǎn)擊保存，運(yùn)行，就可以看到效果了。

總結(jié)

其實(shí)這個(gè)demo還是很簡(jiǎn)單的，就是利用一些定位來(lái)調(diào)整輸入框的位置，然后針對(duì)輸入框的聚焦樣式和失焦樣式來(lái)實(shí)現(xiàn)動(dòng)畫，最后通過(guò)jQuery來(lái)操作這個(gè)動(dòng)畫。

推薦學(xué)習(xí)：《css視頻教程》