使用css实现自适应标题浮动效果（代码实例）

（学习视频分享：css视频教程）

效果展示：

源码展示：

!doctyPE htML>
    html>
    head>
    meta charset="utf-8">
    tITle>
    纯css实现自适应标题浮动效果/title>
         style>
        body {
                background-color:#FAFAFA;
        }
         input[type="text"] {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        width:100%;
        height:-webkit-calc(3em + 2px);
        height:calc(3em + 2px);
        margin:0 0 1em;
        padding:1em;
        border:1px solid #cccccc;
        border-radius:1.5em;
        background:#fff;
        reSize:none;
        outline:none;
}
input[type="text"][required]:focus {
        border-color:#00bafa;
}
input[type="text"][required]:focus + label[placeholder]:before {
        color:#00bafa;
}
input[type="text"][required]:focus + label[placeholder]:before,input[type="text"][required]:valid + label[placeholder]:before {
        -webkit-transition-duration:.2s;
        transition-duration:.2s;
        -webkit-transform:translate(0,-1.5em) scale(0.9,0.9);
        -ms-transform:translate(0,-1.5em) scale(0.9,0.9);
        transform:translate(0,-1.5em) scale(0.9,0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before {
        content:attr(alt);
}
input[type="text"][required] + label[placeholder] {
        display:block;
        pointer-events:none;
        line-height:2.3em;
        margin-top:-webkit-calc(-3em - 2px);
        margin-top:calc(-3em - 2px);
        margin-bottom:-webkit-calc((3em - 1em) + 2px);
        margin-bottom:calc((3em - 1em) + 2px);
}
input[type="text"][required] + label[placeholder]:before {
        content:attr(placeholder);
        display:inline-block;
        margin:0 -webkit-calc(1em + 2px);
        margin:0 calc(1em + 2px);
        padding:0 2px;
        color:#898989;
        white-space:nowrap;
        -webkit-transition:0.3s ease-in-out;
        transition:0.3s ease-in-out;
        background-image:-webkit-gradient(linear,left top,left bottom,From(#ffffff),to(#ffffff));
        background-image:-webkit-linear-gradient(top,#ffffff,#ffffff);
        background-image:linear-gradient(to bottom,#ffffff,#ffffff);
        -webkit-background-size:100% 5px;
        background-size:100% 5px;
        background-repeat:no-repeat;
        background-position:center;
}
    /style>
    /head>
    body>
    div style="width:400px;
    height:100px;
    margin:50px auto">
    form>
    input required="" type="text">
    label alt="请输入用户名" placeholder="名称">
    /label>
    /form>
    /div>
    /body>
    /html>
    

更多编程相关知识，请访问：编程视频！！

以上就是使用css实现自适应标题浮动效果（代码实例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！