通过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;
}
<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"> <input type="text" placeholder=" " /> <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和伪类，就能做出专业又细腻的聚焦效果。
