css漂亮搜索框动画代码

漂亮的搜索框动画可以给网站增添不少亮点，下面是一段使用CSS实现的搜索框动画代码。

/* 搜索框样式 */
.search-box {
position: relative;
display: flex;
align-items: center;
width: 300px;
height: 40px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
overflow: hidden;
}
/* 搜索框输入框样式 */
.search-box input[type="text"] {
flex-grow: 1;
width: 0;
height: 100%;
margin: 0;
padding: 0 20px;
color: #555;
border: none;
outline: none;
background-color: transparent;
font-size: 16px;
transition: width 0.3s ease-out;
}
/* 搜索图标样式 */
.search-box .search-icon {
width: 40px;
height: 100%;
text-align: center;
background-color: #ff7f50;
color: #fff;
border-radius: 20px;
transition: all 0.3s ease-out;
}
/* 输入框聚焦时的样式 */
.search-box input[type="text"]:focus {
width: 100%;
}
/* 输入框聚焦时图标的样式 */
.search-box input[type="text"]:focus + .search-icon {
background-color: #fff;
color: #ff7f50;
transform: scale(0.8);
}

以上代码中，使用了伪类和过渡等CSS技巧，实现了输入框聚焦时自动展开和图标变化的动画效果。同时，对输入框和搜索图标进行了样式修饰，让整个搜索框看起来更具美感。可以在网站的搜索功能中添加上述代码，使其变得更加生动、美观。

查看更多关于css漂亮搜索框动画代码的详细内容...