亚洲国产精品久久久天堂,欧美free性护士xxxxhd

如何用css實(shí)現(xiàn)表單輸入框聚焦動(dòng)畫(huà)

P粉602998670

發(fā)布： 2025-10-17 19:46:02

原創(chuàng)

153人瀏覽過(guò)

通過(guò)CSS的:focus偽類(lèi)結(jié)合transition和transform，可實(shí)現(xiàn)邊框變色、下劃線(xiàn)伸展、標(biāo)簽上浮及輕微縮放等聚焦動(dòng)畫(huà)效果，提升輸入框交互體驗(yàn)。

如何用css實(shí)現(xiàn)表單輸入框聚焦動(dòng)畫(huà)

當(dāng)用戶(hù)點(diǎn)擊或使用Tab鍵進(jìn)入輸入框時(shí)，給一個(gè)平滑的視覺(jué)反饋能提升用戶(hù)體驗(yàn)。通過(guò)CSS的:focus偽類(lèi)結(jié)合過(guò)渡（transition）和變換（transform）等屬性，可以輕松實(shí)現(xiàn)聚焦動(dòng)畫(huà)效果。

1. 基礎(chǔ)聚焦邊框動(dòng)畫(huà)

最常見(jiàn)的方式是改變輸入框的邊框顏色，并添加一點(diǎn)外發(fā)光效果：

input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  outline: none; /* 移除默認(rèn)輪廓 */
  transition: all 0.3s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}</p>

登錄后復(fù)制

說(shuō)明：使用 transition 讓邊框和陰影變化更柔和。box-shadow 提供視覺(jué)高亮，增強(qiáng)聚焦感。

2. 下劃線(xiàn)伸展動(dòng)畫(huà)

適合簡(jiǎn)約風(fēng)格表單，只對(duì)底部邊框做動(dòng)畫(huà)處理：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

input {
  padding: 8px 0;
  font-size: 16px;
  border: none;
  border-bottom: 2px solid #ddd;
  outline: none;
  transition: border-color 0.3s ease;
}
<p>input:focus {
border-bottom-color: #007bff;
}</p>

登錄后復(fù)制

進(jìn)階：從中間向兩邊伸展下劃線(xiàn)

input {
  position: relative;
  padding: 8px 0;
  border: none;
  border-bottom: 2px solid #ddd;
  outline: none;
}
<p>input::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background-color: #007bff;
transition: width 0.3s ease, left 0.3s ease;
}</p><p>input:focus::after {
width: 100%;
left: 0;
}</p>

登錄后復(fù)制

通過(guò)偽元素實(shí)現(xiàn)線(xiàn)條從中向兩側(cè)展開(kāi)的動(dòng)效，視覺(jué)更具吸引力。

3. 標(biāo)簽上浮動(dòng)畫(huà)（配合placeholder）

常用于Material Design風(fēng)格，輸入時(shí)提示文字上移并變?。?/p>

表單大師AI

一款基于自然語(yǔ)言處理技術(shù)的智能在線(xiàn)表單創(chuàng)建工具，可以幫助用戶(hù)快速、高效地生成各類(lèi)專(zhuān)業(yè)表單。

查看詳情

.form-group {
  position: relative;
  margin-bottom: 20px;
}
<p>label {
position: absolute;
left: 10px;
top: 10px;
font-size: 16px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
}</p><p>input:focus + label,
input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #007bff;
}</p>

登錄后復(fù)制

HTML結(jié)構(gòu)示例：

<div class="form-group">
  <input type="text" placeholder=" " />
  <label>用戶(hù)名</label>
</div>

登錄后復(fù)制

注意：要讓:not(:placeholder-shown)生效，placeholder必須設(shè)為空格或?qū)嶋H提示內(nèi)容。

4. 添加輕微縮放動(dòng)畫(huà)

讓輸入框在聚焦時(shí)微微放大，突出當(dāng)前操作區(qū)域：

input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
<p>input:focus {
border-color: #007bff;
transform: scale(1.02);
z-index: 1;
}</p>

登錄后復(fù)制

建議：縮放比例不要太大，1.02~1.05之間比較自然，避免頁(yè)面跳動(dòng)。

基本上就這些。選擇合適的方式取決于你的設(shè)計(jì)風(fēng)格。重點(diǎn)是保持動(dòng)畫(huà)流暢、響應(yīng)及時(shí)，不干擾用戶(hù)輸入。合理運(yùn)用transition和偽類(lèi)，就能做出專(zhuān)業(yè)又細(xì)膩的聚焦效果。

以上就是如何用css實(shí)現(xiàn)表單輸入框聚焦動(dòng)畫(huà)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：

css html 偽元素 css html 偽類(lèi) 偽元素 transform transition