简单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/

posted on 2019-02-16 17:42 `ME 阅读(…) 评论(…) 编辑 收藏

版权声明：本文为show-me-code原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/show-me-code/p/10388526.html