css滑动搜索框

CSS滑动搜索框是一种流行的搜索框样式，可以增加网站的交互性和美观性。本文将介绍如何使用CSS实现滑动搜索框的效果。

<div class="search-container">
<input type="text" placeholder="搜索">
<button type="submit"><i class="fa fa-search"></i></button>
</div>

首先，我们需要一个HTML结构，包括一个输入框和一个搜索按钮。使用div元素包裹它们，并为该div添加一个类名，名称为search-container。在输入框中添加一个占位符，为“搜索”，并在搜索按钮中添加一个搜索图标。

.search-container {
width: 300px;
position: relative;
}
.search-container input[type=text] {
width: 100%;
height: 45px;
padding: 10px 20px;
font-size: 18px;
border-radius: 25px;
border: none;
outline: none;
}
.search-container button[type=submit] {
position: absolute;
right: 0;
top: 0;
height: 45px;
width: 45px;
border-radius: 50%;
background-color: #2ecc71;
border: none;
outline: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-container button[type=submit]:hover {
background-color: #27ae60;
}

接下来，我们使用CSS为搜索框和搜索按钮添加样式。搜索容器div需要设置一个宽度，并使用相对定位使搜索按钮相对于搜索框定位。对于输入框，设置宽度为100%，高度为45px，添加内边距和字体大小，并将边框和边框半径设为零。最后，我们使用CSS实现按钮的样式。按钮需要绝对定位，这样它才能位于输入框的右侧。用使用框半径的百分比设置按钮的形状，并设置背景颜色和过渡效果，以保证鼠标悬停时按钮颜色的变化。

.search-container input[type=text]:focus + button[type=submit] {
transform: translateX(-75%);
}
.search-container button[type=submit]:focus {
outline: none;
}

最后一步是通过CSS实现滑动搜索框效果。在搜索框获得焦点时，我们使用伪类选择器+操作符实现搜索按钮的平移。具体来说，当输入框获得焦点时，使用transform：translateX（-75％）将搜索按钮向左移动。然后，在搜索按钮上使用:focus伪类选择器，以确保当用户点击搜索按钮时没有虚线边框。

现在，您已经学会使用CSS实现滑动搜索框效果！通过将此样式应用于您的网站，可以提高用户体验并提升网站的美观度。

查看更多关于css滑动搜索框的详细内容...