GoogleAccountInput

偶然看到谷歌账户登录的效果，觉得很有意思，于是扒拉看了一下～

谷歌账户登录

输入提示是通过div模拟的，输入框被focus的时候，就transformY+scale，即可简单快速完成该输入框效果。

参考着自己做了一下，https://shineasyr.github.io/FELearning/GoogleAccountInput.html
我的实现源码：

<!-- html -->
<div class="input-con">
    <input type="text" class="user-account">
    <div class="input-note">电子邮件地址或电话号码</div>
</div>
<style>
/* css */
    .input-con {
        font-size: 16px;
        line-height: 24px;
        position: relative;
        margin: 20px;
    }
    .user-account {
        padding: 12px 14px;
        font-size: 16px;
        line-height: 24px;
        min-width: 240px;
        border-radius: 5px;
        border-width: 1px;
    }
    .user-account:focus + .input-note {
        transform: scale(.75) translateY(-34px) translateX(-26px);
        color: #0067e6;
    }
    .input-note {
        background-color: #fff;
        color: #bfbfbf;
        padding: 4px 12px;
        position: absolute;
        bottom: 9px;
        left: 3px;
        transition: transform 150ms cubic-bezier(0.4,0,0.2,1);
        pointer-events: none;
    }
</style>

PS：由于pointer-events: none;的存在，兼容性是IE11+

⭐️⭐️⭐️知识点
贝塞尔曲线：为加速曲线，可以设置运动过程的快与慢。
cubic-bezier(0.4,0,0.2,1)的如下所示

cubic-bezier(0.4,0,0.2,1)

参考文档

• transition-timing-function zh-cn
• cubic-bezier en
• cubic-bezier.com工具