动画-搜索框

望间2023/6/19大约 4 分钟

这个搜索框平时显示为一个圆形图标，点击聚焦后会平滑展开为输入框，同时搜索图标也会优雅地消失。

效果展示

<div class="container">
  <label>
    <input type="text" required />
    <span class="line"></span>
  </label>
</div>

.container {
  position: relative;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.container label {
  position: relative;
}
.container input {
  width: 38px;
  height: 38px;
  line-height: 38px;
  outline-style: none;
  font-size: 16px;
  color: #333;
  border: 3px solid #a8a8a8;
  border-radius: 19px;
  padding: 0 16px;
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;
}
.container .line {
  width: 3px;
  height: 14px;
  display: block;
  background-color: #a8a8a8;
  transform: rotate(320deg);
  position: absolute;
  left: 32px;
  top: 30px;
  z-index: 10;
  opacity: 1;
  transition: all 0.4s ease-in-out;
}
.container input:focus,
input:valid {
  width: 180px;
}
.container input:focus + .line,
input:valid + .line {
  width: 1px;
  height: 16px;
  left: 19px;
  top: 10px;
  opacity: 0;
  transform: rotate(360deg);
}

代码解析

HTML 结构

这个动画搜索框的HTML结构非常简洁：

最外层是一个 .container div，用于居中显示搜索框
内部使用 <label> 标签包裹 <input> 和搜索图标 <span>
<input> 标签设置了 required 属性，这对于实现输入时保持展开状态很重要
<span class="line"> 用于模拟搜索图标的一部分（实际上是搜索图标的"柄"）

CSS 动画原理

这个搜索框的动画效果主要通过 CSS transition 属性和伪类选择器实现：

初始状态：
- 输入框宽度仅为 38px，呈现为圆形
- 搜索图标线条位于输入框右侧
交互状态：
- 使用 :focus 伪类捕获输入框获得焦点的状态
- 使用 :valid 伪类确保输入内容后保持展开状态
过渡动画：
- 当输入框获得焦点或有内容时，宽度从 38px 平滑过渡到 180px
- 搜索图标线条同时发生多属性变化：宽度缩小、高度增加、位置移动、透明度降低、旋转360度
- 所有过渡效果通过 transition: all 0.4s ease-in-out; 实现，持续时间为0.4秒，使用ease-in-out缓动函数
布局技巧：
- 使用 Flexbox (display: flex; justify-content: center;) 实现搜索框居中
- 使用相对定位和绝对定位组合实现搜索图标的精确定位
- 使用 z-index 确保搜索图标线条显示在输入框上方

使用方法

自定义样式

你可以根据需要调整以下样式参数：

颜色：修改 border: 3px solid #a8a8a8; 和 background-color: #a8a8a8; 来改变边框和图标的颜色
大小：调整 width: 38px; height: 38px;（初始大小）和 width: 180px;（展开大小）
动画速度：修改 transition: all 0.4s ease-in-out; 中的时间值
圆角：调整 border-radius: 19px;（通常设置为高度的一半）

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画搜索框</title>
  <style>
    /* 搜索框样式 */
    .container {
      position: relative;
      height: 60px;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .container label {
      position: relative;
    }
    .container input {
      width: 38px;
      height: 38px;
      line-height: 38px;
      outline-style: none;
      font-size: 16px;
      color: #333;
      border: 3px solid #a8a8a8;
      border-radius: 19px;
      padding: 0 16px;
      box-sizing: border-box;
      transition: all 0.4s ease-in-out;
    }
    .container .line {
      width: 3px;
      height: 14px;
      display: block;
      background-color: #a8a8a8;
      transform: rotate(320deg);
      position: absolute;
      left: 32px;
      top: 30px;
      z-index: 10;
      opacity: 1;
      transition: all 0.4s ease-in-out;
    }
    .container input:focus,
    input:valid {
      width: 180px;
    }
    .container input:focus + .line,
    input:valid + .line {
      width: 1px;
      height: 16px;
      left: 19px;
      top: 10px;
      opacity: 0;
      transform: rotate(360deg);
    }
  </style>
</head>
<body>
  <div class="container">
    <label>
      <input type="text" required placeholder="搜索..." />
      <span class="line"></span>
    </label>
  </div>
</body>
</html>