在網頁開發中，搜索框是常見的組件之一。而如何讓搜索框有良好的交互體驗也是我們需要考慮的問題之一。

今天，我們來介紹一種使用 CSS3 動畫來實現搜索框上下滑動效果的方法。

/* Step 1: 設置搜索框容器樣式 */
.search-box {
position: relative;
}
/* Step 2: 定義搜索框的樣式 */
.search-input {
width: 100%;
height: 40px;
border: none;
background-color: #ECEFF3;
border-radius: 20px;
padding: 5px 15px;
box-sizing: border-box;
transition: box-shadow 0.3s ease;
}
/* Step 3: 定義搜索框動畫效果 */
.search-input:focus {
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 
0 5px 25px rgba(0, 0, 0, 0.15);
position: absolute;
top: -30px;
left: 0;
right: 0;
margin: 0 auto;
height: 100px;
border-radius: 0;
border-bottom: 1px solid #ECEFF3;
}
/* Step 4: 隱藏搜索框容器的滾動條*/
.search-box::-webkit-scrollbar {
display: none;
}

以上就是使用 CSS3 動畫實現搜索框上下滑動效果的代碼了。

通過這種方法，我們可以讓搜索框在用戶輸入時有更好的視覺效果，提高用戶體驗。

當然，這只是搜索框動畫效果的一個例子。在實際開發中，我們還可以根據需要對搜索框進行不同的動畫效果設置。

感謝您的閱讀，希望對您有所幫助。