1、html5代碼如下：
<section class="topseacher">
<input type="text" id="searchinput" name="s" class="searchinput" placeholder="在這裏搜索" />
<input type="submit" id="searchsubmit" class="buttons" value="→" />
</section>
2、css3代碼如下：
/*搜索容器*/
.searchinput{
float:left; /*對齊*/
width:160px; /*寬度*/
height:28px; /*高度*/
padding:0 0 0 5px; /*內間距*/
border:#063 1px solid; /*邊框*/
border-right:none; /*右邊框*/
color:#949494; /*字體顏色*/
overflow:hidden; /*溢出*/
font-size:12px; /*字號*/
-webkit-transition:width .4s ease-in; /*動畫效果：允許CSS的屬性值在一定的時間區間內平滑地過渡*/
}
/*搜索欄：鼠標放上時候*/
.searchinput:hover{ /*鼠標劃過時的樣式*/
width:240px; /*寬度*/
color:#222; /*顏色*/
}
/*搜索欄：獲得焦點時候*/
.searchinput:focus{ /*獲得焦點時*/
outline:none; /*外邊框*/
}
/*搜索按鈕*/
.buttons{
float:left; /*浮動位置*/
height:30px; /*高度*/
width:40px; /*寬度*/
cursor:pointer; /*鼠標指針*/
border:#063 1px solid; /*邊框*/
border-left:none; /*左邊框*/
background:hsla(120,100%,20%,1); /*背景*/
color:#fff; /*顏色*/
}
/*搜索按鈕：鼠標放上時*/
.buttons:hover{
background:#903; color:#fff; /*顏色*/
}
在chrome瀏覽器上顯示效果如下：
注意：
1、當你把transition放在.searchinput裏面時，移下移上都會很平滑，但放在.searchinput:hover裏面時，只有在移上時平滑，移下時就很生硬了。
2、.topseacher裏是right還是left,決定寬度向哪個方向運動。