简单css实现input提示交互动画效果

通过基础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/