本文將介紹如何使用純CSS3實現搜索框伸縮功能，即當用戶點擊搜索圖標時，搜索框能夠在水平方向上伸縮出現。以下是實現該功能的CSS3代碼：

/* 定義搜索框容器樣式 */
.search-container {
position: relative;
display: inline-block;
}
/* 定義搜索框樣式 */
.search-input {
width: 0;
height: 32px;
padding: 0 10px;
border: none;
border-radius: 16px;
transition: width 0.4s ease-in-out;
}
/* 定義搜索按鈕樣式 */
.search-button {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #ccc;
transition: background-color 0.4s ease-in-out;
}
/* 定義搜索框伸縮效果 */
.search-container:hover .search-input {
width: 200px;
}
.search-container:hover .search-button {
background-color: #333;
}
/* 定義搜索框動態效果 */
.search-input:focus {
outline: none;
box-shadow: 0 0 5px #666;
}

通過以上CSS3代碼，我們定義了搜索框容器、搜索框輸入以及搜索按鈕的樣式，并使用偽類選擇器在鼠標懸浮時觸發搜索框伸縮效果和搜索按鈕背景色變化效果。此外，還在搜索框獲取焦點時添加了一些動態效果。

總之，使用純CSS3實現搜索框伸縮效果并不難，只需要一些基本的CSS技能就能輕松實現。希望讀者通過本文的介紹，能夠更好地使用CSS3來優化頁面效果。