html
<div class="logo_help">
<span class="search">
<span class="inp">
<input type="text" class="qing" id="kys" placeholder="请输入关键字搜索">
<img src="res/default/images/zx2.jpg" alt="">
</span>
</span>
</div>
css
.logo_help {
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(221, 221, 221, 1);
border-radius: 50%;
float: left;
margin-right: 20px;
margin-left: 300px;
}
.search {
display: block;
float: left;
width: 40px;
height: 40px;
background: url(../images/zx2.jpg) no-repeat scroll center center;
cursor: pointer;
position: relative;
margin-top: -3px;
}
.search .inp {
display: block;
height: 43px;
line-height: 12px;
border: 3px solid #eaeaea;
background-color: #fff;
width: 230px;
position: absolute;
left: -160px;
top: 48px;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
-webkit-transform: translateY(15px);
transition: .45s;
-webkit-transition: .45s;
}
.search input {
display: block;
height: 1.5;
padding: 15px 10px;
width: 210px;
border: 0;
font-size: 12px;
color: #afafaf;
}
.search:hover .inp {
transform: translateY(0px);
-webkit-transform: translateY(0px);
opacity: 1;
visibility: visible;
z-index: 999;
}
.search img {
position: absolute;
top: 11px;
right: 10px;
}