输入框聚焦动画（浮动标签 + 渐变下划线 + 辉光描边）

效果演示（真实可交互）

表单输入框的聚焦反馈决定了填表时的「手感」。演示区提供 3 款风格各异的聚焦动画，全部真实可输入：第一款是浮动标签——点击输入框后占位文字化身的标签上浮缩小并变蓝，输入内容后保持上浮状态，清空后归位；第二款是渐变下划线——聚焦时底部一条蓝紫绿三色渐变线从左往右展开；第三款是辉光描边——搜索框聚焦时边框变紫并泛起彩色投影，左侧放大镜图标同步变色。三者都保留了清晰的 :focus 状态，配合原生输入语义，既好看又不牺牲可访问性。三款动画分别对应三种表单气质：浮动标签适合字段较多的注册页，渐变下划线轻量克制适合设置面板，辉光描边醒目适合搜索入口。所有输入框都保留真实输入与 label 关联，手机端点击 label 也能聚焦，触屏体验完整。聚焦动画的价值在于「状态可感知」：用户一眼就能看出当前正在编辑哪个字段，尤其表单字段较多时能显著降低填错率；三种风格也可以按业务自由混用，不冲突。

完整代码

HTML：浮动标签的秘诀是「占位符留空 + label 绝对定位」，通过 :placeholder-shown 判断空态：

<div class="if-field if-float">
  <input id="ifName" type="text" placeholder=" ">
  <label for="ifName">你的名字</label>
</div>

CSS：浮动标签零 JS，聚焦或「有内容」两种状态共用同一套上浮规则：

.if-float label {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); color: #8892ab; font-size: 14px;
  transition: top .22s cubic-bezier(.34,1.2,.64,1), font-size .22s ease, color .22s ease;
}
/* 聚焦 或 非空占位（即输入了内容）→ 标签上浮 */
.if-float input:focus + label,
.if-float input:not(:placeholder-shown) + label {
  top: 12px; font-size: 11px; color: #6c8cff; font-weight: 600;
}

渐变下划线：伪元素 scaleX(0) 收起，聚焦时从左侧展开：

.if-line input { border: 0; background: #f3f5fb; }
.if-line .if-underline {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #6c8cff, #b388ff, #34c7a1);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.if-line input:focus + .if-underline { transform: scaleX(1); }

辉光描边：聚焦时切换边框色并叠加双层投影：

.if-glow input:focus {
  border-color: #b388ff; outline: none;
  box-shadow: 0 0 0 4px rgba(179,136,255,.18), 0 0 24px rgba(108,140,255,.35);
}
.if-glow input:focus ~ svg { color: #6c8cff; }   /* 左侧图标同步变色 */

参数说明

兼容性与性能

• 三款均为纯 CSS：浮动标签用 :placeholder-shown 零 JS；下划线与辉光用伪元素与 box-shadow
• :placeholder-shown 在 Chrome / Firefox / Safari 9+ / Edge 均支持；Safari 旧版需同时用 ::-webkit-input-placeholder 变通
• 动画只涉及 transform、color、box-shadow，其中 transform 走合成器，聚焦/失焦单次触发，性能无负担
• 输入框保留原生 label for 关联与真实输入语义，读屏与键盘操作完全无障碍
• 浮动标签在浏览器自动填充（回填用户名密码）时也能保持上浮，因为回填会触发 :not(:placeholder-shown)；如果发现个别浏览器回填后样式不更新，可配合 input 事件补一次 class 刷新

常见问题

Q: 浮动标签在 Safari 上不生效？ 检查占位符是否为单个空格字符 placeholder=" "；部分旧版 Safari 对空占位符的 :placeholder-shown 判定不稳定，可改用 JS 的 input 事件加 .filled 类兜底。

Q: 标签上浮后和输入内容重叠？ 上浮的 top 值要与输入框 padding-top 匹配，比如输入框 padding: 16px 14px 12px 时标签停在 top: 12px 就不会压字。

Q: 辉光太刺眼？ 降低外圈投影的透明度与模糊半径，例如 0 0 14px rgba(108,140,255,.2)，或把内圈 0 0 0 4px 改成 0 0 0 2px。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名。