H5 中怎么实现 input 输入框获得焦点时底部线条高亮动画-H5教程-PHP中文网

h5页面中input获焦底部线条高亮动画可用纯css实现：①推荐border-bottom+transition改色；②box-shadow模拟发光效果；③伪元素实现伸缩/划入动画；④需适配移动端默认样式。

h5 中怎么实现 input 输入框获得焦点时底部线条高亮动画

在 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 实现颜色渐变动画

示例代码：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<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"> <li>用 <code>::after 在 wrapper 底部画一条线，默认宽度为 0
聚焦时通过 width: 100% + transition 实现横线展开
配合 transform: scaleX(0) → scaleX(1) 更顺滑（需设 transform-origin: left）