如何用css实现表单输入框聚焦动画_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-17

浏览次数：次

返回列表

通过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风格，输入时提示文字上移并变小：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

.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和伪类，就能做出专业又细腻的聚焦效果。

以上就是如何用css实现表单输入框聚焦动画的详细内容，更多请关注其它相关文章！

# 就能 # 网站优化任务书 # 陈皮茶网络营销推广策略 # seo带货平台有哪些 # 蚌埠科技推广网站建设 # 山东谷歌seo优化在线咨询 # 海运客户网站建设流程 # 柳东网站优化 # 陕西关键词排名表 # 百度关键词排名广告 # 购物网站建设免费分析 # 设为 # css # 选择器 # 两种类型 # 进阶 # 中不 # 如何用 # 下划线 # 表单 # 输入框 # 伪元素 # html