[分享]css3搜索框滑出效果

在现代网页设计中，搜索框是不可或缺的元素。除了基本的输入和提交功能外，添加一些交互和动画效果可以提高用户体验。本文将介绍如何使用CSS3制作一个搜索框滑出效果。.searchbox { : relat...

在现代网页设计中，搜索框是不可或缺的元素。除了基本的输入和提交功能外，添加一些交互和动画效果可以提高用户体验。本文将介绍如何使用CSS3制作一个搜索框滑出效果。

.search-box {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
.search-input {
  width: 100%;
  height: 40px;
  font-size: 18px;
  border: none;
  border-radius: 20px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}
.search-input:focus {
  outline: none;
  width: 350px;
}
.search-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 40px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  color: #fff;
  background-color: #333;
  cursor: pointer;
  transform: translateX(300px);
  transition: all 0.3s ease-in-out;
}
.search-btn:hover {
  background-color: #111;
}
.search-input:focus ~ .search-btn {
  transform: translateX(0);
} 

首先，我们创建一个外层容器 `.search-box` ，用来包裹输入框和按钮。在输入框 `.search-input` 的样式中，我们使用了 `transition` 属性来实现输入框宽度的平滑变化。同时，使用 `:focus` 伪类来监听输入框的焦点状态。在输入框焦点变化时，宽度会从初始值渐变至 350px。

按钮 `.search-btn` 初始时，使用了 `transform` 属性将按钮向右平移 300px，超出了容器的范围。使用 `transition` 属性来平滑过渡按钮位置。在输入框获得焦点时，我们使用了 CSS3 相邻兄弟选择器 `~` 来找到 `.search-btn` 并将其位置向左平移至容器内，从而实现滑出效果。

最后，将搜索框样式应用到相应的 HTML 结构上即可使用。这个搜索框滑出效果可以为网页提供更好的交互和用户体验。