前端登陆页面案例之hover的效果，盒子模型，布局练习

比眉伴天荒 2023-10-10 14:33 3阅读 0赞

前端登陆页面案例

可以作为初步熟悉前端基本用法案例，hover鼠标移动到页面的效果

![请添加图片描述][c977cd26543847e19f4b9021f4c0f803.bmp]

Html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hover效果</title>
        <link rel="stylesheet" href="./Login.css">
    </head>
    <body>
    
    <div class="login">
        <h1>supermarket system</h1>
        <form action="">
            <input type="text" placeholder="账号">
            <input type="text" placeholder="密码">
            <button>登录</button>
        </form>
    </div>
    
    <script>
        //获取login
        let login = document.querySelector('.login')
        let span
        let inTime,outTime
    
        //鼠标进入事件
        login.addEventListener('mouseenter', function (e) {
          
            inTime = new Date().getTime()
            //生成span元素
            span = document.createElement('span')
            login.appendChild(span)
            //去span上使用in动画
            span.style.animation = 'in .5s ease-out forwards'
    
            //计算坐标
            let top = e.clientY - e.target.offsetTop
            let left = e.clientX - e.target.offsetLeft
            span.style.top = top +'px'
            span.style.left = left +'px'
        })
        //鼠标离开事件
        login.addEventListener('mouseleave', function (e) {
          
            outTime = new Date().getTime()
            let passTime = outTime-inTime
    
            if (passTime < 500){
          
                setTimeout(mouseleave,500-passTime)
            }else{
          
                mouseleave()
            }
            function mouseleave(){
          
    
            }
            span.style.animation = 'out .5s ease-out forwards'
            //计算坐标
            let top = e.clientY - e.target.offsetTop
            let left = e.clientX - e.target.offsetLeft
            span.style.top = top +'px'
            span.style.left = left +'px'
            login.removeChild(span)
        })
    </script>
    
    </body>
    </html>

*  login.css文件

* {
        
        margin: 0;
        padding: 0;
        color: #eee;
    }
    
    body {
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        /*background-color: #155e58;*/
        background-color: #FF3CAC;
        background-image: linear-gradient(320deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    
    
    
    }
    
    .login {
        
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 450px;
        background-color:  #8b918f;
        border: 5px solid #c8ddff;
        border-radius: 10px;
        box-shadow: 10px 10px 20px rgb(48, 156, 125);
    }
    
    h1 {
        
        margin-top: -20px;
        font-size: 26px;
        font-weight: 400;
        /*提高层级*/
        z-index: 1;
    }
    
    form {
        
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 230px;
        z-index: 1;
    }
    
    input {
        
        width: 200px;
        height: 40px;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid #eee;
        font-size: 16px;
        outline: none;
    }
    
    input::placeholder {
        
        font-size: 12px;
        color: #eee;
    }
    
    button {
        
        width: 180px;
        height: 36px;
        border: 1px solid #eee;
        border-radius: 18px;
        background-color: transparent;
        font-size: 14px;
        cursor: pointer;
    }
    
    span {
        
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        background-color: #20917a;
        transform: translate(-50%,-50%);
        /*圆形展示*/
        border-radius: 50%;
    }
    
    /*鼠标进入login时的动画*/
    @keyframes in {
        
        0% {
        
            width: 0;
            height: 0;
        }
        100% {
        
            width: 1200px;
            height: 1200px;
        }
    }
    
    /*鼠标离开login时的动画*/
    @keyframes out {
        
        0% {
        
            width: 1200px;
            height: 1200px;
        }
        100% {
        
            width: 0;
            height: 0;
        }
    }

部分知识

#### 盒子模型 ####

一个初始盒子会有默认的边距所以一般初始化为0，如下css代码

* {
        
        margin: 0;
        padding: 0;
        color: #eee;
    }

margin ：外边距

padding：内边距

border：边框

*  margin
    
     *  margin：0 auto；—第一个元素代表上下，第二个元素代表左右
 *   *  border-radius: 10px; —边界圆li角----四个元素—左上，右上，右下，左下–参数小于等于50
     *  border: 1px solid red —边框颜色粗细
     *  boder：1px solid dashed \#4d0b8c —边框的虚线

盒子的计算方式：margin + border + padding + 内容宽度

**盒子阴影**：

*  box-shadow: —盒子阴影

前端素材样例：源码之家，飞冰，vue-element -admin

**浮动**：

*  display：inline-block: —是块儿元素，可以内联盒子在一行
 *  display：block: ====盒子在
 *  display: inline ===行内元素
 *  float：right/left/ ----左浮，右浮
 *  clear :both ----清除浮动

[c977cd26543847e19f4b9021f4c0f803.bmp]: https://img-blog.csdnimg.cn/c977cd26543847e19f4b9021f4c0f803.bmp