效果展示

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="../CSS/1.CSS">
    <script src="../JS/jQurey3.6.0.JS"></script>
</head>

<body>
    <div class="container">

        <h1>用户登录</h1>
        <form action="">
            <input type="text" class="tbx" placeholder="账号">
            <input type="password" class="tbx" placeholder="密码">
            <input type="submit" class="sub" value="登录">
        </form>

    </div>


    <script>
        // 获取元素
        var con = document.querySelector('.container');

        // 定义两个函数 鼠标进入 出去
        let isIn = true; //鼠标进去的门，默认打开
        let isOut = false; //鼠标出去的门，默认关闭

        var span;

        //添加监听
        //监听鼠标进去的事件
        con.addEventListener('mouseenter',(e)=>{
            //如果进去的门是打开的,就可以执行这个函数
            if(isIn){
                 //获取进入的鼠标位置
                //生成元素的位置 = 进入点距离窗口的距离-父盒子距离窗口的距离
                //e.clientX;相对于浏览器左上角 
                let inX = e.clientX-e.target.offsetLeft;
                let inY = e.clientY-e.target.offsetTop;

                //创建一个span元素,并且给他对应的出生坐标
                let el = document.createElement('span');
                el.style.left = inX+'px';
                el.style.top = inY+'px';
                con.appendChild(el);

                $('.container span').removeClass('out');//移除出去的动画
                $('.container span').addClass("in");// 添加进入的动画
                span = document.querySelector('.container span');

                isIn = false;//关闭进来的门(不能使用进入的方法)
                isOut = true; //打开出去的门(可以使用出去的方法)

            }
        })

        // 监听鼠标出去的事件
        con.addEventListener('mouseleave',(e)=>{
            if(isOut){
                //获取进入的鼠标位置
                //生成元素的位置 = 进入点距离窗口的距离-父盒子距离窗口的距离
                //e.clientX;相对于浏览器左上角 
                let outX = e.clientX-e.target.offsetLeft;
                let outY = e.clientY-e.target.offsetTop;

                $('.container span').removeClass('in');     // 移除进入的动画
                $('.container span').addClass('out');       // 添加出去的动画
                // 添加出去的坐标
                $('.out').css('left',outX+'px');
                $('.out').css('top',outY+'px');
                isOut = false; // 关闭出去的门
                 // 当动画结束后再删除元素
                 setTimeout(() =>{
                    con.removeChild(span);// 删除元素
                    isIn = true; // 打开进入的门
                 },500)
            }
        })
    </script>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

/* body标签 */
body {
    /* 设置body高度为100%窗口高度 100vh==100% */
    /* vh跟100%的区别 ：
       1.当元素没有内容的时候，设置100% 元素不会被撑开，此时高度就是0
       2.当设置vh的时候，元素就会被撑开，与屏幕一致
       3.100%是相对于包含它的最近的父元素的高度和宽度。
        vw (viewport width) vh (viewport height) 是相对于视口的宽度和高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系，可以用来开发自适应多种屏幕设备。
    */
    height: 100vh;

    /* 盒子模型 */
    display: flex;
    /* 把所有写在body标签里面的代码居中显示 */
    /* 上面定义了flex盒子，这里就直接用盒子模型定位 */

    /* 剧中排列 */
    /* 横向居中 */
    justify-content: center; 

    /* 使元素位于容器的中心，会将body里面的元素，居中显示 */
    align-items: center;

    background-color: rgb(253, 253, 253);
}

.container {
    display: flex;
    justify-content: center; 
    align-items: center;

    /* 使垂直显示 ，正如一个列一样  会将两个盒子垂直显示*/
    flex-direction: column;

    width: 400px;
    height: 500px;

    /* 圆角边框 */
    border-radius: 20px;
    background-color: #4471a3;

    /* 盒子阴影  x 偏移量 | y 偏移量 | 阴影模糊半径| 阴影颜色 */
    box-shadow: 15px 15px 10px rgba(33,45,58,.3);

    /* 溢出隐藏 超过给定的宽度和高度，超出的部分就会隐藏 */
    overflow: hidden;

    /* 生成相对定位的元素，相对于其正常位置进行定位，如left20 会在left添加20像素 */
    position: relative;
}


.container form {
    width: 400px;
    height: 250px;

    display: flex;

    /* 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 */
    /* 均匀排列每个元素，每个元素周围分配相同的空间 */
    justify-content: space-around;

    /* 变成一列 */
    flex-direction: column;

    /* 居中显示 */
    align-items: center;

    /* 层叠效果：就是在平面的上面一层 */
    z-index: 1;
}

.container form .tbx {
    width: 250px;
    height: 40px;

    /* 去掉元素周围的一条黑线 */
    outline: none;

    /* 边框不渲染 */
    border: none;

    color: rgb(113, 113, 113);
    font-size: 15px;
}


.container form .tbx::placeholder {
    color: rgb(193, 190, 190);
    font-size: 16px;
}

.container form .sub {
    width: 250px;
    height: 40px;
    outline: none;
    border: 1px solid #fff;
    border-radius: 20px;  
    /* 字间距 */
    letter-spacing: 5px;
    color: #fff;
    background: none;
    /* 鼠标放上去有光标 */
    cursor: pointer;
    margin-top: 20px;
}

.container h1 {
    color: #fff;
    font-size: 45px;
    letter-spacing: 5px;
    font-weight: normal;
    text-shadow: 5px 5px 5px rgba(33,45,58,.4);
    z-index: 1;
}

/* 设置鼠标进入的样式 */
.container .in {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgb(242, 73, 73);
    /*  translate平移，x轴和y轴往负轴方向平移50%  50%指自身的高度和宽度的50% */
    transform: translate(-50%,-50%);

    /* 使用out动画  持续0.5s  缓出的时间函数  停留在最后一帧 */
    animation: in 0.5s ease-out forwards;
}


/* 设置鼠标离开的样式 */
.container .out {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: rgb(242, 73, 73);
    transform: translate(-50%,-50%);
    /* 使用out动画  持续0.5s  缓出的时间函数  停留在最后一帧 */
    animation: out 0.5s ease-out forwards;
}


/* 设置鼠标进入时，元素的动画 */
@keyframes in {
    /* 初始关键帧 */
    0% {
        width: 0;
        height: 0;
    }

    /* 结束关键帧 */
    100% {
        width: 1200px;
        height: 1200px;
    }
}

/* 设置鼠标离开时，元素的动画 */
@keyframes out {
    /* 初始关键帧 */
    0% {
        width: 1200px;
        height: 1200px;
    }

    /* 结束关键帧 */
    100% {
        width: 0;
        height: 0;
    }
}

登录界面设计之美，一键启程前端之旅！

效果展示

HTML

css