登录框效果是怎么实现的？

作者: 简书超级会员 | 来源:发表于2019-04-04 14:41 被阅读0次

登录框效果是怎么实现的？
登录框效果实现
登录注册UI ---- 1
2016-12-13
iOS开发之模仿Mac版QQ登录动画
登录框弹出
七、考勤系统发布安装
iOS制作一个漂亮的登录界面
iOS制作一个漂亮的登录界面_文章更新版
SwiftUI实战-自定义TextField搭建登录页面UI

斧快不怕纽纹.
-民谚

效果可以参见下面的GIF示意：

我们可以借助CSS :placeholder-shown伪类，纯CSS，无任何JS，实现这样的占位符交互效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input-fill-x {
            position: relative;

        }

        .input-label {
            position: absolute;
            left: 16px;
            top: 7px;
            pointer-events: none;
        }
        .input-control{
            padding: 0 10px;
            width: 200px;
            height:30px;
            font-size: 14px;
        }

        .input-fill:placeholder-shown::placeholder {
            color: transparent;
        }

        .input-fill:not(:placeholder-shown) ~ .input-label,
        .input-fill:focus ~ .input-label {
            color: #72a0ff;
            top: 14px;
            background: white;
            transform: scale(0.75) translate(0, -32px);
        }


        input:focus{
            outline:1px solid #98ccff;
            padding: 0 10px;
        }


    </style>
</head>
<body>
<h4>填充风格</h4>
<div class="input-fill-x">
    <input type="text" class="input-control input-fill" placeholder="邮箱">
    <label class="input-label">邮箱</label>
</div>

</body>
</html>