在網頁設計中，CSS作為樣式表語言被廣泛應用。其中，點擊圖標劃出搜索框的效果也是比較常見的。下面，讓我們來看看如何實現這一效果。

/*CSS樣式表*/
.search-icon{
width:30px;
height:30px;
background:url("search.png") no-repeat center center;
}
.search-box{
position:absolute;
top:0;
right:0;
width:0px;
height:30px;
border:none;
padding:0px;
outline:none;
transition:width 0.5s ease;
}
.search-icon:focus + .search-box{
width:150px;
padding:0px 10px;
border:1px solid #ccc;
}

代碼解析：

首先，我們創建一個類名為“search-icon”的樣式，用于顯示搜索圖標。該樣式設置了該元素的寬高和背景圖片。

接著，我們創建一個類名為“search-box”的樣式，表示搜索框。按照本文實現的效果，搜索框的初始狀態是收起的，且不具有邊框、內邊距和輪廓線。此外，我們還設置了搜索框的過渡效果，使其展開時有一個平滑過渡的效果。

最后，我們使用:focus偽類，當點擊搜索圖標時，搜索框的狀態發生變化。通過關聯選擇器“+”，我們選擇搜索圖標的下一個兄弟元素，即搜索框。在該狀態下，搜索框的寬度會變為150px，同時具有1px的灰色邊框和10px的內邊距。

通過以上的代碼實現，點擊搜索圖標時，搜索框會從初始狀態下的0px寬度，展開到150px的寬度。此外，邊框和內邊距也會發生變化，從而呈現出一種動態的效果，為網頁設計增添了一份生動活潑的感覺。