使用: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，就能让输入框“活”起来。
