本文介绍一种无需 javascript 的纯 css 方案，通过 :focus 和 :not(:placeholder-shown) 伪类联动 ~ 选择器，实现表单标签平滑上移、缩放的浮动效果，兼顾语义性、可访问性与性能。
本文介绍一种无需 javascript 的纯 css 方案，通过 :focus 和 :not(:placeholder-shown) 伪类联动 ~ 选择器，实现表单标签平滑上移、缩放的浮动效果，兼顾语义性、可访问性与性能。
在现代表单设计中，“浮动标签（Floating Label）”是一种广受认可的 UX 模式：标签默认位于输入框内部或下方，当用户聚焦或输入内容后，标签优雅上浮并缩小，为输入内容腾出空间，同时保持字段含义清晰可见。你当前尝试用 JavaScript 切换动画类的方式逻辑正确，但存在两个关键问题导致失效：
- CSS 类名误加点号：classList.add(".username-focus-label-animation") 中的 ".xxx" 是选择器写法，而 classList API 接收的是纯类名字符串（不带 .）。应改为 add("username-focus-label-animation")；
- 动画触发时机与状态耦合不足：仅靠 click 事件无法覆盖所有聚焦场景（如 Tab 键切换），且未监听输入内容变化；更严重的是，.username-focus-label-animation 一旦执行完毕，其 transform 值被 forwards 固定，后续再添加 .username-blur-label-animation 时，因起始状态不是 translate(0, 0.1rem)，动画将无法正确反向播放。
推荐采用纯 CSS 驱动方案——它更轻量、更可靠、天然支持键盘导航与屏幕阅读器，并避免 JS 状态管理复杂度。
✅ 正确实现方式：结构 + CSS 伪类联动
核心思路是将
<label> <input type="text" name="username" placeholder=""><span>Username</span> </label>
对应关键 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 更符合“浮动即有值”的交互直觉，且完全免去 JS 状态维护。
⚠️ 注意事项与增强建议
- 可访问性保障：确保 具有 name 和语义化 type（如 type="email"）， 作为视觉标签，不可替代 。若需严格语义，可保留传统
- 字体与动画微调：你使用的 Urbanist 字体需确保已正确引入；动画时长 0.3s 可根据品牌动效规范调整为 0.25s 或 0.35s，避免过快（难感知）或过慢（显拖沓）。
- 响应式适配：在小屏设备上，top/translateY 数值建议用 rem 或 em 单位，便于随根字体缩放统一调整。
✅ 总结
放弃手动切换 class 的 JS 动画逻辑，转而采用 :focus + :not(:placeholder-shown) + ~ 相邻选择器的纯 CSS 浮动标签方案，不仅能彻底解决你当前的动画失效问题，还能提升代码健壮性、可维护性与无障碍体验。它轻量、声明式、零运行时开销，是现代表单动效的最佳实践之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
