如何用css设置表单输入框聚焦过渡

使用:focus与transition实现输入框聚焦平滑动画，先定义输入框基础样式并设置transition过渡属性，再通过:focus伪类改变边框颜色、阴影及位置，使交互更流畅自然。

当用户点击输入框时，让边框或背景平滑变化，能提升表单的交互体验。实现聚焦过渡的关键是结合 :focus 伪类和 transition 属性。

设置输入框基础样式

先定义输入框的基本外观，便于后续添加动效。

input {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  outline: none; /* 去除默认聚焦外框 */
  transition: all 0.3s ease; /* 核心：添加过渡效果 */
}

定义聚焦状态样式

使用 :focus 伪类修改输入框获得焦点时的视觉表现。

input:focus {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px); /* 可选：轻微上浮动画 */
}

关键点说明

确保过渡自然且不卡顿，注意以下细节：

• transition 属性必须写在常态样式中，否则不会有渐变过程
• 可以只过渡特定属性，如 transition: border-color 0.3s
• 调整 ease、linear 或 cubic-bezier() 控制动画节奏
• box-shadow 配合透明度变化，能营造柔和高光感

基本上就这些。只要加上 transition 和 :focus，就能让输入框“活”起来。