搜索框是網頁中常用的組件之一，通過在搜索框中輸入關鍵詞，可以幫助用戶快速定位需要的內容。而搜索框的伸縮效果是讓搜索框更加協調和美觀的方式之一。下面我們將介紹如何使用CSS實現搜索框的伸縮效果。

/* CSS代碼 */
.search-box {
width: 200px; /* 搜索框的初始寬度 */
height: 30px; /* 搜索框的高度 */
background-color: #f0f0f0; /* 搜索框的背景色 */
border: none; /* 取消搜索框的邊框 */
transition: width 0.5s; /* 設置寬度變化的過渡效果 */
}
.search-box:focus {
width: 300px; /* 搜索框伸縮后的寬度 */
}

代碼中的.search-box是搜索框的類名，通過該類名可以控制搜索框的樣式。為了實現搜索框的伸縮效果，我們使用了CSS中的過渡效果transition。設置了寬度變化時的過渡時間為0.5秒，這樣當搜索框的寬度發生變化時，就會有一個流暢的過渡動畫。

當用戶點擊搜索框時，會出現一個焦點，此時搜索框就處于“聚焦狀態”，我們利用:focus偽類來針對該狀態進行樣式設置。通過設置更大的寬度，可以實現搜索框的伸縮效果。

總的來說，搜索框的伸縮效果可以讓頁面更加美觀和協調。希望通過這篇文章，能夠幫助大家更好地理解如何使用CSS實現搜索框的伸縮效果。