label文字升空缩小通过input:focus联动label内元素实现，需label包裹input并设position:relative，用>或+选择器控制span.label-text的transform和font-size，同时为label-text添加transition且input预留足够padding-top。
focus时label文字升空缩小的CSS实现原理
这本质上是利用表单控件 :focus 状态联动 label 的定位与缩放，但必须满足两个前提：label必须包裹 input（或用 for/id 显式关联），且 label 需设为 position: relative 或类似可定位上下文。直接对 label 写 :focus 是无效的——label 本身不触发焦点，真正响应的是里面的 input。
label文字升空动画的关键CSS写法
核心是用相邻兄弟选择器（+）或子选择器（>）从 input:focus 反向控制 label 样式。推荐结构是 label 包裹 input，这样能用 > 更可靠：
label {
position: relative;
display: block;
}
label > input {
padding: 12px 0;
}
label > input:focus + span.label-text,
label > input:focus ~ span.label-text {
transform: translateY(-18px) scale(0.85);
font-size: 12px;
color: #4a6fa5;
}
注意：span.label-text 必须放在 input 后面（用 + 或 ~），否则无法选中；若 label 内只有文本无 span，则需用 label > input:focus + label::before 这类 hack，但兼容性和可维护性差得多。
常见错误：动画不触发或跳变
- label 没设
position: relative—— 导致transform相对文档流位移，而非相对自身 - input 和 label-text 元素顺序错乱（比如 label-text 在 input 前）——
+和~完全失效 - 没加
transition到 label-text 上—— 动画不会平滑，而是瞬间切换 - 用了
margin-top替代transform: translateY—— 触发重排，性能差，且和 placeholder/边框冲突
兼容性与移动端注意事项
Chrome/Firefox/Safari（现代版）支持良好，但 iOS Safari 对 transform + input:focus 联动偶有延迟，建议加 will-change: transform 提前提示渲染引擎。另外，移动端软键盘弹出可能改变视口高度，导致升空后 label 被遮挡——此时不能只靠 CSS，需监听 focusin 事件配合 scrollIntoView({block: 'nearest'}) 补救。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：label 文字升空后，input 的 padding-top 必须预留足够空间，否则文字会和输入内容重叠。这个值要和 transform: translateY(-18px) 的数值匹配，且要考虑不同字号下的视觉一致性。
