前言

发现掘金的登录框上的动画非常好玩，我们实现一下它

准备

网页素材检查网页可以发现，登录页上面的小人是SVG的图片，一共三张。我们需要把它下载下来。

online

用户名

密码框

再准备个背景图片

开整

第一步登录框样式

基础代码

<body>
    <div class="div1"></div>
    <div class="div2">
        <img id="img1" src="./online.svg">
        <form>
            <h1>手机登录</h1> 
            <div id="div3" class="div3">x</div>
            <br>
            <input type="text" name="username"><br>
            <input type="password" name="password"><br>
            <button type="submit">登录</button><br>
        </form>
    </div>
</body>

三层样式

<style>
    body {
        z-index: 1;
        background-image: url("./back.png");
        background-size:100% 100%;
        background-attachment: fixed;
    }
    .div1 {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        -moz-opacity: 0.8;
        opacity: .3;
        z-index: 500;
    }
    form {
        position: relative;
        padding: 2rem;
        width: 26.5rem;
        font-size: 1.167rem;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 1001;
    }

</style>

第二步x 关闭窗口的鼠标事件

.div3 {
        text-align: right;
        margin-top: -65px;
        color: #cdcdcd;
    }

javascript 鼠标移入字体颜色变#000移出#cdcdcd

<div id="div3" class="div3" onmouseover="test1('111')" onmouseout="test1('222')">x</div>

function test1(xxx){
        if (xxx==="111"){
            var x = document.getElementById("div3");
            x.style.color="#000";
        }
        else {
            var x = document.getElementById("div3");
            x.style.color="#cdcdcd";
        }
    }

第三步input窗口的鼠标事件

form {
        position: relative;
        padding: 2rem;
        width: 26.5rem;
        font-size: 1.167rem;
        background-color: #fff;
        box-sizing: border-box;
        z-index: 1001;
    }
    img {
        transform: translate(-50%,-90.6%);
        position: absolute;
        left: 50%;
        width: 10rem;
        z-index: 2001;
        margin-top: -224px;
    }
    input {
        padding: 10px 0px;
        width: 100%;
        border: 1px solid #e9e9e9;
        font: inherit;
        margin-bottom: .8rem;
    }

javascript

<img id="img1" src="./online.svg">
<input type="text" name="username" onmouseover="test2('111')" onmouseout="test2('222')"><br>
<input type="password" name="password" onmouseover="test3('111')" onmouseout="test3('222')"><br>

function test2(xxx) {
        if (xxx==="111"){
            var x = document.getElementById("img1");
            x.src = "./name.svg";
            x.style.marginTop="-231px"
        }
        else {
            var x = document.getElementById("img1");
            x.src = "./online.svg";
            x.style.marginTop="-224px"
        }
    }
    function test3(xxx) {
        if (xxx==="111"){
            var x = document.getElementById("img1");
            x.src = "./pwd.svg";
            x.style.marginTop="-253px"
        }
        else {
            var x = document.getElementById("img1");
            x.src = "./online.svg";
            x.style.marginTop="-224px"
        }
    }

线上地址

看一下
 github

非常好玩的掘金登录动画

前言

准备

开整

线上地址

最后效果