css实现向上滑动隐藏搜索框

CSS是创建网页时不可或缺的一部分，它可以让我们实现各种各样的效果。其中之一就是向上滑动隐藏搜索框。接下来，我们就来学习一下如何使用CSS来实现这个效果。

//HTML结构
<div class="wrapper">
   <div class="searchBox">
      <input type="text" placeholder="请输入搜索内容">
   </div>
</div>

//CSS样式
.wrapper {
   position: relative;
   overflow: hidden;
   height: 100px;
}

.searchBox {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: #f5f5f5;
   transition: all 0.3s ease;
}

.wrapper:hover .searchBox {
   transform: translateY(-50px);
}

在这个例子中，我们首先将包含搜索框的div设置为relative定位，并将其高度设置为100px。然后，我们将搜索框的div设置为absolute定位，并将其bottom属性设置为0，这样它就会固定在div的底部。

接下来，我们设置了搜索框的高度、宽度和背景颜色，并使用了CSS过渡效果来平滑地将其向上移动。使用:hover选择器，我们可以让搜索框在鼠标悬停时向上滑动50px。

这段代码在实现网站搜索功能时非常实用，它可以让用户以更美观、方便的方式使用搜索功能。