H5页面中input获焦底部线条高亮动画可用纯CSS实现：①推荐border-bottom+transition改色；②box-shadow模拟发光效果；③伪元素实现伸缩/划入动画；④需适配移动端默认样式。
在 H5 页面中实现 input 获得焦点时底部线条高亮动画，核心是利用 CSS 的 :focus 伪类 + border-bottom 或 box-shadow 配合 transition 实现平滑过渡效果。不需要 JS，纯 CSS 即可完成。
使用 border-bottom + transition（推荐）
这是最简洁、兼容性好、语义清晰的方式：
- 默认状态下，设置
border-bottom: 2px solid #ddd - 聚焦时改为
border-bottom: 2px solid #007aff（如 iOS 主题蓝） - 添加
transition: border-bottom-color 0.3s ease实现颜色渐变动画
示例代码：
<input type="text" class="input-line">
.input-line {
border: none;
border-bottom: 2px solid #ddd;
outline: none;
padding: 10px 0;
font-size: 16px;
transition: border-bottom-color 0.3s ease;
}
.input-line:focus {
border-bottom-color: #007aff;
}
用 box-shadow 模拟更细腻的高亮效果
适合需要「发光感」或避免改变布局（border 可能影响高度）的场景：
- 默认：不设阴影或极细下阴影
- 聚焦时：加
box-shadow: 0 2px 0 0 #007aff，配合transition - 注意：需设
border: none和outline: none保持干净
.input-shadow {
border: none;
outline: none;
padding: 10px 0;
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-shadow:focus {
box-shadow: 0 2px 0 0 #007aff;
}
进阶：带「线条伸缩」或「从左到右划入」动画
若需更动态的效果（如 Material Design 风格），可用伪元素模拟：
- 给 input 包一层
<div class="input-wrapper"> - 用
::after在 wrapper 底部画一条线，默认宽度为 0 - 聚焦时通过
width: 100%+transition实现横线展开 - 配合
transform: scaleX(0) → scaleX(1)更顺滑（需设transform-origin: left）
移动端适配注意点
H5 在 iOS/Android 上可能因默认样式干扰导致失效：
- 务必加
-webkit-appearance: none去除 Safari 默认 input 样式 - iOS Safari 中，
outline: none有时不生效，建议同时加outline: 0 - 为防止点击放大，可加
-webkit-tap-highlight-color: transparent - 安卓部分浏览器对
transition支持弱，优先用color/opacity/transform属性
