如何用纯CSS实现输入框标签聚焦上浮动画

本文介绍一种无需 JavaScript 的纯 CSS 方案，通过 :focus 和 :not(:placeholder-shown) 伪类联动 ~ 选择器，实现表单标签平滑上移、缩放的浮动效果，兼顾语义性、可访问性与性能。

在现代表单设计中，“浮动标签”（Floating Label）已经是一种被广泛认可的交互模式——标签默认待在输入框内部或下方，用户聚焦或输入内容后，它优雅地上浮并缩小，为输入内容腾出空间，同时保持字段含义清晰可见。如果你之前尝试用 JavaScript 切换动画类来控制这个效果，思路没错，但通常会碰到两个挺头疼的问题：

1. CSS 类名误加点号：classList.add(".username-focus-label-animation") 中的 ".xxx" 是选择器写法，而 classList API 接收的是纯类名字符串（不带点）。应改为 add("username-focus-label-animation")。
2. 动画触发时机与状态耦合不足：只靠 click 事件根本覆盖不了所有聚焦场景——比如用 Tab 键切换输入框就不会触发。更麻烦的是，.username-focus-label-animation 一旦执行完毕，其 transform 值被 forwards 固定住；后续再添加 .username-blur-label-animation 时，因为起始状态不是 translate(0, 0.1rem)，动画根本没法正确反向播放。

所以这里推荐一个更干净的思路：纯 CSS 驱动方案。它更轻量、更可靠，天然支持键盘导航与屏幕阅读器，还能彻底避开 JavaScript 状态管理带来的各种麻烦。

正确实现方式：结构 + CSS 伪类联动

核心思路是把 包裹住 ，然后利用相邻兄弟选择器 ~ 和状态伪类来控制 标签的变换。看结构：

  
  Username

对应的 CSS 如下（已经适配过你的设计风格）：

.login-container label {
  position: relative;
  display: block;
}

.login-container label span {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  transform-origin: left center;
  transition: transform 0.3s ease, scale 0.3s ease, color 0.2s;
  color: #ddd;
  font-size: 1rem;
  pointer-events: none; /* 防止遮挡输入 */
}

/* 当输入框获得焦点，或已有内容（非空占位符）时，标签上浮缩小 */
.login-container input:focus ~ span,
.login-container input:not(:placeholder-shown) ~ span {
  transform: translate(0, -1.3rem) scale(0.8);
  color: #0bf; /* 可选：聚焦时变色强化反馈 */
}

/* 输入框获得焦点时，底部边框高亮 */
.login-container input:focus {
  outline: none;
  border-bottom-color: #0bf;
}

/* 输入无效时（如 email 格式错误）提供视觉提示 */
.login-container input:invalid:not(:placeholder-shown) ~ span {
  color: #f00;
}

为什么 :not(:placeholder-shown) 更优？
它能精准检测用户是否已输入内容（即使失去焦点），比单纯依赖 :focus 更符合“浮动即有值”的交互直觉，而且完全不用写一行 JavaScript 来维护状态。

注意事项与增强建议

• 可访问性保障：确保 有 name 和语义化的 type（比如 type="email"）。 只是视觉标签，不能替代 的 for/id 关联。如果你追求严格的语义，可以保留传统 ，并用 aria-hidden="true" 隐藏浮动 。不过本例中的嵌套结构本身已经满足了基础的可访问性。
• 字体与动画微调：你用的 Urbanist 字体一定要确保正确引入；动画时长 0.3s 可以根据品牌的动效规范调整为 0.25s 或 0.35s——太快了难以感知，太慢了会显得拖沓。
• 响应式适配：在小屏设备上，top / translateY 的数值建议用 rem 或 em 单位，这样能随着根字体缩放统一调整。

总结

放弃手动切换 class 的 JavaScript 动画逻辑，转而采用 :focus + :not(:placeholder-shown) + ~ 这一套纯 CSS 浮动标签方案，不仅能彻底解决你当前碰到的动画失效问题，还能让代码更健壮、更易维护，无障碍体验也更好。它轻量、声明式、零运行时开销——可以说是现代表单动效里相当值得推荐的最佳实践之一。