CSS如何实现输入框提示文字的浮动动画_利用transform translateY上移

label上浮需绑定input（for/id或嵌套），设position: relative、transform: translateY(-整数px)、transition，配合:placeholder-shown/:focus/:valid控制状态，并处理z-index、pointer-events及padding-top。input:focus 时 label 怎么用 transform translateY 上移必须把 label 和 input 绑定（用 for/id 或嵌套），否则 :focus 伪类无法影响到 label。浮动动画本质是：默认状态 label 压在 input 上方，获取焦点后向上平移 + 改变字号/颜色。常见错误是直接对 label 写 transform: translateY(-20px) 却没设 position: relative —— 没定位上下文，transform 会作用于文档流外，导致文字“消失”或错位。label 必须加 position: relative动画需搭配 transition: transform 0.2s ease, font-size 0.2s ease（只写 transform 不够，字号也要过渡）input 要有 padding-top，给上移后的 label 留出空间，否则文字会被遮挡placeholder 消失后 label 浮动不跟手？检查 :valid 和 :placeholder-shown纯靠 input:focus + label 只能解决聚焦时的上浮，但用户输入后失去焦点，label 还得保持上浮状态——否则一点击别处就掉回去，体验断裂。这时候不能只依赖 :focus。现代方案是组合使用 :placeholder-shown（placeholder 显示时）和 :valid（有输入且通过 required 校验时）。注意：:valid 在空值时为 false，但 placeholder 存在时 :placeholder-shown 为 true，两者配合才能覆盖“有输入”和“空但聚焦”两种上浮场景。立即学习“前端免费学习笔记（深入）”； 今天学点啥 秘塔AI推出的AI学习助手