如何將輸入框從頁面中心移動到頁面頂部的輸入焦點在css中？

我認爲這很簡單，但我不確定它是如何實現的。假設我有一個最初以頁面爲中心的輸入字段（水平垂直地爲&）。但是，我想在用戶開始輸入時將輸入框設置爲頁面頂部的動畫，這將如何實現？我最初的想法是分配top:0並將其轉換爲焦點。比這更復雜嗎？如何將輸入框從頁面中心移動到頁面頂部的輸入焦點在css中？

請賜教。

input.input-student-search { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(0px); 
 
    padding: 27px 145px 27px 38px; 
 
    margin: 10px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: 0 10px 20px rgba(198, 198, 198, 0.02), 0 6px 6px rgba(221, 221, 221, 0.23); 
 
    border-radius: 6px; 
 
    text-align: left; 
 
    &:focus { 
 
    top: 0; 
 
    } 
 
}

來源

2017-03-01 DingDong

任何源代碼來處理？ –

當然，給我一分鐘來證明我的觀點@RohitKishore – DingDong

請檢查上面的@RohitKishore – DingDong

這是我做到了：

.txt { 
    position: relative; 
    text-align: center; 
    width: 90%; 
    margin: 0 20px 0 20px; 
    top: 200px; 
    transition: top 0.4s; 
} 

.txt:focus{ 
    top:0; 
}

Here is the JSFiddle demo

來源

2017-03-01 08:39:59

謝謝，真的很感激 – DingDong

只要把top:0在:focus風格：

input.input-student-search:focus { 
    top:0; 
}

input.input-student-search { 
 
    background-color:#AAA; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(0px); 
 
    padding: 27px 145px 27px 38px; 
 
    margin: 10px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: 0 10px 20px rgba(198, 198, 198, 0.02), 0 6px 6px rgba(221, 221, 221, 0.23); 
 
    border-radius: 6px; 
 
    text-align: left; 
 
    transition:top 1s linear; 
 
} 
 
input.input-student-search:focus { 
 
    top:0; 
 
}

<input class="input-student-search" type="text"/>

來源

2017-03-01 08:35:25

上面的簡單代碼，但我將如何給它一些動畫，它移動順利？ – DingDong

如何將輸入框從頁面中心移動到頁面頂部的輸入焦點在css中？

回答

相關問題