首页 > 文章 > 前端

输入框聚焦动画实现技巧

时间：2026-01-23 13:15:30 416浏览收藏

前往漫画官网入口并下载 ➜

一分耕耘，一分收获！既然打开了这篇文章《CSS实现输入框聚焦动画方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

通过CSS的:focus伪类结合transition和transform，可实现边框变色、下划线伸展、标签上浮及轻微缩放等聚焦动画效果，提升输入框交互体验。

如何用css实现表单输入框聚焦动画

当用户点击或使用Tab键进入输入框时，给一个平滑的视觉反馈能提升用户体验。通过CSS的:focus伪类结合过渡（transition）和变换（transform）等属性，可以轻松实现聚焦动画效果。

1. 基础聚焦边框动画

最常见的方式是改变输入框的边框颜色，并添加一点外发光效果：

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

说明：使用 transition 让边框和阴影变化更柔和。box-shadow 提供视觉高亮，增强聚焦感。

2. 下划线伸展动画

适合简约风格表单，只对底部边框做动画处理：

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>

进阶：从中间向两边伸展下划线

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>

通过伪元素实现线条从中向两侧展开的动效，视觉更具吸引力。

3. 标签上浮动画（配合placeholder）

常用于Material Design风格，输入时提示文字上移并变小：

.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>

HTML结构示例：

<div class="form-group">
  &lt;input type=&quot;text&quot; placeholder=&quot; &quot; /&gt;
  <label>用户名</label>
</div>

注意：要让:not(:placeholder-shown)生效，placeholder必须设为空格或实际提示内容。

4. 添加轻微缩放动画

让输入框在聚焦时微微放大，突出当前操作区域：

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>

建议：缩放比例不要太大，1.02~1.05之间比较自然，避免页面跳动。

基本上就这些。选择合适的方式取决于你的设计风格。重点是保持动画流畅、响应及时，不干扰用户输入。合理运用transition和伪类，就能做出专业又细腻的聚焦效果。

好了，本文到此结束，带大家了解了《输入框聚焦动画实现技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

前往漫画官网入口并下载 ➜