如何使用 HTML 和 CSS 创建动画搜索框？

在前端开发中，动画效果常常是我所需要实现的，例如：搜索框的展开收起、导航栏的下拉效果等。这篇文章就是为了分享如何使用 HTML 和 CSS 来创建一个动画搜索框。

首先，我们需要先定义我们的搜索框，代码如下：

<div class="search-container">
  <input type="text" placeholder="请输入关键词">
  <button>搜索</button>
</div>

这里我们定义了一个 class 为 search-container 的 div 元素，内部包含了一个输入框和一个按钮。我们需要在其基础上添加动画效果，实现搜索框的展开和收起功能。

接下来，我们来编写一些 CSS 代码：

.search-container {
  width: 300px;
  height: 40px;
  position: relative;
  margin: 0 auto;
}
.search-container input[type="text"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  background-color: white;
  font-size: 16px;
  box-sizing: border-box;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.search-container button {
  width: 60px;
  height: 100%;
  background-color: #0099FF;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

这里我们给 search-container 容器添加了一些基本样式，包括宽高、相对定位和水平居中布局等。此外，我们给输入框和按钮分别设置了一些样式，包括样式的边框、边角、背景、字体大小和颜色等。

接下来，我们需要为搜索框添加动画效果，代码如下：

.search-container input[type="text"]:focus {
  width: 400px;
}
.search-container button {
  transform: translateX(60px);
  opacity: 0;
}
.search-container input[type="text"]:focus + button {
  transform: translateX(0);
  opacity: 1;
}

这里我们使用了 CSS3 的 transition 和 transform 属性，通过对输入框和按钮的样式进行修改，来实现搜索框的动画效果。当输入框被聚焦时，其宽度将扩展至 400px，同时按钮将从右侧移动到其右侧。

总结

本文介绍了如何使用 HTML 和 CSS 来创建一个带动画效果的搜索框。通过对搜索框的样式进行修改和过渡，我们成功实现了一个简单的搜索框动画效果。这样的效果同样可以应用到其他的动画效果中。