簡單css實現input提示互動動畫效果
摘要：
通過基礎CSS實現輸入提示互動動畫效果，併兼容各瀏覽器！
1.效果展示
2.css程式碼
h4 {
margin: 30px 0;
}
input {
margin: 0;
...
通過基礎CSS實現輸入提示互動動畫效果，併兼容各瀏覽器！
1.效果展示
2.css程式碼
h4 {
margin: 30px 0;
}
input {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.input-fill-x, .input-outline-x, .textarea-outline-x {
position: relative;
}
.input-control:focus + label {
color: red;
background: white;
transform: scale(0.8) translate(0, -17px);
}
.input-label {
padding: 0 5px;
position: absolute;
left: 10px;
top: 3px;
transform-origin: 0 0;
pointer-events: none;
transition: all .3s;
}
3.html程式碼
<h4>輪廓風格</h4> <div class="input-outline-x"> <input class="input-control input-outline"> <label class="input-label">郵箱</label> </div> <h4>文字域</h4> <div class="textarea-outline-x"> <textarea class="input-control textarea-outline" cols="25" rows="3"></textarea> <label class="input-label">評論</label> </div>
結論：
實現了基本目標功能。
使用者在填寫表單時，這種輸入框的設計通過動畫既節約了空間，也方便直觀給使用者提示。
程式碼的實現上簡單、粗暴，同時相容性也不差。
在對於輸入框的樣式上也可以自由擴充套件，可以應用在PC、H5上。
有更好的方法實現可評論推薦交流。
引入連結：https://www.zhangxinxu.com/wordpress/2018/12/css-placeholder-shown-material-design/