CSS輸入框動畫效果是網頁設計中經常用到的一個特效，它可以為輸入框增加生動、有趣的交互體驗，提高用戶的滿意度和留存率。下面我們來介紹幾種常見的CSS輸入框動畫效果及相關代碼。

/* 1. 邊框動畫效果 */
input {
border: none;
border-bottom: 2px solid #ccc;
transition: all 0.3s ease-in-out;
&:focus {
border-color: #ff6666;
box-shadow: 0 2px 0 #ff6666;
}
}
/* 2. 顏色漸變效果 */
input {
background: linear-gradient(to right, #ff6666, #ff5e62);
border: none;
color: #fff;
transition: all 0.3s ease-in-out;
&:focus {
box-shadow: inset 0 -3px 0 #fff;
}
}
/* 3. 下劃線跟隨效果 */
.input-container {
position: relative;
input {
border: none;
border-bottom: 2px solid #ccc;
transition: all 0.3s ease-in-out;
}
span {
position: absolute;
display: block;
bottom: 5px;
left: 0;
width: 0;
height: 2px;
background: #ff6666;
transition: all 0.3s ease-in-out;
}
input:focus + span {
width: 100%;
}
}
/* 4. 填充效果 */
.input-wrapper {
position: relative;
input {
border: none;
position: relative;
z-index: 2;
padding: 10px;
width: 100%;
background: transparent;
color: #666;
}
.fill {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: #ff6666;
z-index: 1;
transition: all 0.3s ease-in-out;
}
input:focus + .fill {
width: 100%;
}
}

以上是幾種常見的CSS輸入框動畫效果，它們各具特色，可以根據不同的設計需求和網頁風格進行選擇和調整，讓網頁更加豐富多彩、用戶更加愉悅體驗。同時，我們也注意到，這些效果中多用到了CSS的偽類和過渡、動畫等屬性，這為我們了解和運用CSS提供了一定的啟示。