簡單css實現input提示交互動畫效果

通過基礎CSS實現輸入提示交互動畫效果，並兼容各瀏覽器！

1.效果展示

 

 

 

2.css代碼

        h4 {
            margin: 30px 0;
        }
        input {
            margin: 0;
            font-size: 16px;
        }
        .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/