CSS下拉框動效是web開發中常用的功能之一，它可以美化網頁，提升用戶體驗。下面介紹一些基礎的CSS下拉框效果。

<div class="dropdown">
<select name="select-options" id="select-option">
<option value="option1">選項1</option>
<option value="option2">選項2</option>
<option value="option3">選項3</option>
<option value="option4">選項4</option>
</select>
</div>

使用select標簽創建select框。還可以通過添加class類創建下拉菜單。

.dropdown {
position: relative;
display: inline-block;
margin: 20px;
}
.dropdown select {
padding: 10px;
width: 150px;
border: none;
box-shadow: none;
background-color: #ddd;
-webkit-appearance: none;
appearance: none;
}
.dropdown:before,
.dropdown:after {
content: "";
position: absolute;
pointer-events: none;
}
.dropdown:before { /* 下箭頭 */
border-bottom: 10px solid #ddd;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 16px;
left: 130px;
}
.dropdown:after { /* 上箭頭 */
border-top: 10px solid #ddd;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
bottom: 16px;
left: 130px;
}

為下拉框添加樣式，設置寬度、內邊距，取消邊框陰影等外觀。對于before和after偽元素的使用可以實現下拉框的箭頭指示器。

.dropdown select:focus {
outline: none;
}
.dropdown select option:hover {
background: #f8f8f8;
}

實現下拉框選項的點擊效果。當用戶在下拉菜單選項上懸停時，背景顏色將變為灰色。

以上就是基礎的CSS下拉框效果實現。