css animation实现动态伸缩搜索框

可以使用CSS3的动画属性来实现动态伸缩搜索框。具体步骤如下：

1. 首先，需要创建一个搜索框的HTML结构，可以使用input元素和一个包含搜索图标的button元素。

2. 接下来，使用CSS样式设置搜索框的基本样式，包括宽度、高度、边框、圆角等。

3. 使用CSS3的transition属性设置搜索框的过渡效果，使其在伸缩时具有平滑的动画效果。

4. 使用CSS3的transform属性设置搜索框的缩放效果，使其在伸缩时能够实现动态效果。

5. 最后，使用JavaScript代码监听搜索框的焦点事件，当搜索框获得焦点时，将其宽度扩大，失去焦点时将其宽度缩小。

下面是一个示例代码，可以实现动态伸缩搜索框的效果：

/* 搜索框基本样式 */
.search-box {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 5px 10px;
  transition: width 0.3s ease-in-out;
}

/* 搜索框获得焦点时的样式 */
.search-box:focus {
  width: 300px;
}

/* 搜索按钮样式 */
.search-btn {
  float: right;
  width: 30px;
  height: 30px;
  background: url(search.png) no-repeat center center;
  border: none;
  cursor: pointer;
}

<!-- 搜索框HTML结构 -->
<div class="search-box">
  <input type="text" placeholder="请输入搜索内容">
  <button class="search-btn"></button>
</div>

相关问题：