在頁面設計中，輸入框是一種經常使用的控件，通過巧妙的CSS樣式設計，可以讓輸入框的交互更加生動有趣。

CSS代碼：
.input-field {
position: relative;
}
.input-field label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: all 0.3s ease-out;
color: #aaa;
}
.input-field input:focus + label {
font-size: 12px;
top: 8px;
color: #2196f3;
}

以上代碼實現了輸入框浮動特效的效果，當鼠標點擊輸入框時，label標簽會向上移動一段距離，顏色也會發生變化。

實現原理：通過給label設置絕對定位，并且top值為50%（垂直居中），然后通過transform屬性將該元素向上移動自身的50%高度，此時label標簽垂直居中在輸入框上方。

當鼠標點擊輸入框時，我們給輸入框的:focus狀態添加一個樣式，通過CSS選擇器“+”將改變label標簽的樣式，此時我們將top值設置為8px，而字體大小及顏色也發生了變化，實現了輸入框的浮動特效。

這種特效讓用戶在輸入框中輸入時，能夠更加直觀地感覺到當前輸入框獲得了焦點，提高了用戶的交互體驗。