<div class="search-box">
<a class="search-btn">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
<input type="text" class="search-txt" placeholder="搜索" />
<div class="search-line"></div>
</div>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #f8cb59;
}
.search-line {
position: absolute;
left: 62px;
bottom: 10px;
width: 0px;
height: 2px;
">rgb(251, 121, 0);
transition: 0.3s;
}
.search-box {
position: absolute;
bottom: 30px;
left: 30px;
">white;
box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.1);
height: 40px;
padding: 10px;
border-radius: 40px;
display: flex;
}
.search-txt {
border: none;
background: none;
outline: none;
padding: 0;
color: #222;
font-size: 16px;
line-height: 40px;
width: 0;
transition: 0.4s;
}
.search-btn {
color: #888888;
font-size: 24px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.4s;
}
.search-box:hover .search-txt {
width: 200px;
padding: 0 12px;
}
.search-box:hover .search-btn {
">;
animation: rotate 0.4s linear;
}
.search-txt:focus {
width: 200px;
padding: 0 12px;
}
.search-txt:focus + .search-line {
width: 200px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}