CSS下拉框特效可以為網站的用戶體驗帶來更多樂趣和便捷。下面將分享一個基于CSS的下拉框特效。

<div class="dropdown"><select><option value="1">選項一</option><option value="2">選項二</option><option value="3">選項三</option></select></div><style>.dropdown select {
padding: 10px; 
background: white; 
font-size: 16px; 
border: none; 
width: 200px; 
margin: 0 auto;
display: block;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance:none;
appearance:none;
outline:none;
cursor:pointer;
position:relative;
z-index:1;
}
.dropdown:before,
.dropdown:after {
content: "";
position:absolute;
z-index:-1;
display:block;
bottom:15px;
height:50%;
width:100%;
max-width:300px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform-origin: 100% 0;
}
.dropdown:before {
background:#ddd;
transform: skew(-18deg) rotate(-6deg);
}
.dropdown:after {
background:white;
transform: translate(0,-50%) skew(-18deg) rotate(-6deg);
transition:0.5s;
animation: bulge 0.5s ease-out;
}
@keyframes bulge {
0% { height: 0;}
50% { height: 100%; }
100% { height: 96%; }
}
.dropdown select:focus + .dropdown:after{
animation-name: none;
}
</style>

以上代碼中，我們使用了CSS的偽元素:before和:after來實現三角形下拉框效果。在使用:hover時會有一閃而過的過渡效果，為了避免這個問題，我們使用:focus來觸發動畫。代碼中還使用到偽類-appearance:none來清除輸入框的默認外觀，outline:none來清除默認外邊框。

通過這樣一種簡單的實現方法，我們可以得到一個精美的下拉框效果，為用戶帶來不同程度的視覺體驗。