css制作表单输入框边框动画

首先实现点击输入框时边框从左到右展开的动画效果，通过CSS伪元素::after创建动态线条，在input获得焦点时将其宽度由0增至100%，配合transition实现平滑过渡，同时隐藏原始边框以突出动画效果。

给表单输入框添加边框动画，可以提升用户体验，让界面更具交互感。下面介绍一种常见的CSS边框动画效果：点击输入框时，边框从左到右展开一条高亮线条。

基础HTML结构

创建一个简单的输入框：

CSS样式与动画实现

使用伪元素和:focus状态来实现边框动画效果。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

.input-field:focus ~ .border-animation::before {
  width: 100%;
  transition: width 0.4s ease;
}

完整可运行代码示例

将以下代码保存为HTML文件即可查看效果：

立即学习“前端免费学习笔记（深入）”；

<style>
.input-group {
  position: relative;
  margin: 20px 0;
}

.input-field {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  border: none;
  outline: none;
  background: transparent;
  border-bottom: 1px solid #ccc;
}

.input-field:focus {
  border-bottom-color: transparent;
}

.input-field::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.4s ease;
}

.input-field:focus::after {
  width: 100%;
}
</style>

<form class="input-group">
  <input type="text" class="input-field" placeholder="请输入内容">
</form>

这个动画的核心是利用 ::after 伪元素作为动态线条，在输入框获得焦点时将其宽度从0扩展到100%，形成边框展开的视觉效果。你可以修改颜色、高度、持续时间等属性来自定义风格。

基本上就这些，不复杂但容易忽略细节。

以上就是css制作表单输入框边框动画的详细内容，更多请关注php中文网其它相关文章！