纯css实现自适应标题浮动效果

最新推荐文章于 2022-07-14 11:01:01 发布

Mr.王征

最新推荐文章于 2022-07-14 11:01:01 发布

阅读量831

点赞数 5

分类专栏： CSS 文章标签：自适应输入框输入框浮动效果

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88061290

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!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>
<hr>
<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客

                                                                               --王
</pre>


</body>
</html>

Mr.王征

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css实现自适应标题浮动效果

效果展示：源码展示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯css实现自适应标题浮动效果&lt;/title&gt; &lt;style&gt; body {
复制链接

扫一扫