CSS 動畫可以為網(wǎng)頁帶來更加生動有趣的效果。本文將探討如何使用CSS實現(xiàn)輸入框動畫。

input{
border: none;
border-bottom: 2px solid #333;
background-color: #f5f5f5;
padding: 10px;
}
input:focus{
border-bottom: 2px solid #007bff;
}

以上代碼為一個簡單的輸入框樣式，接下來我們將通過使用CSS動畫來為其添加一些交互效果。首先，我們需要在input的父元素上添加一個label，用于在輸入框未獲得焦點時給出提示。

<div class="input-container">
<label for="input">請輸入</label>
<input type="text" id="input" name="input" placeholder="請輸入">
</div>

接下來，我們使用CSS的偽類選擇器:focus和::placeholder，在獲得焦點和未輸入內(nèi)容時，分別為輸入框和提示文字添加過渡效果。

.input-container input{
border: none;
border-bottom: 2px solid #333;
background-color: #f5f5f5;
padding: 10px;
transition: all 0.3s ease-in-out;
}
.input-container input:focus{
border-bottom: 2px solid #007bff;
}
.input-container input::placeholder{
color: #aaa;
transition: all 0.3s ease-in-out;
}
.input-container input:focus::placeholder{
color: #007bff;
}

這樣，當(dāng)我們在輸入框中輸入內(nèi)容后，提示文字會從輸入框上方逐漸滑動消失，輸入框底部的下劃線也會從灰色變成藍(lán)色。當(dāng)輸入框失去焦點時，如果沒有輸入內(nèi)容，提示文字會重新上升到輸入框上方，下劃線也會從藍(lán)色變?yōu)榛疑?/p>

通過以上CSS代碼，我們可以為網(wǎng)頁的輸入框添加動畫效果，提高用戶的交互體驗。