首页 > Web开发 > 详细

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

时间:2019-02-16 18:45:16      阅读:338      评论:0      收藏: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/

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

原文:https://www.cnblogs.com/show-me-code/p/10388526.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!