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

P粉602998670 2025-10-17 00:00:00 次阅读

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

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

1. 基础聚焦边框动画

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

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

说明：使用 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;
}
input:focus {
border-bottom-color: #007bff;
}

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

input {
  position: relative;
  padding: 8px 0;
  border: none;
  border-bottom: 2px solid #ddd;
  outline: none;
}
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;
}
input:focus::after {
width: 100%;
left: 0;
}

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

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

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

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

HTML结构示例：


  
  用户名

注意：要让: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);
}
input:focus {
border-color: #007bff;
transform: scale(1.02);
z-index: 1;
}

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

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