css自适应插画背景登录表单页面效果代码-html代码-BFW代码库

css自适应插画背景登录表单页面效果代码

代码语言：html

代码描述：css自适应插画背景登录表单页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/solid.5.3.1.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome.5.3.1.css">
    <style>
        *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body{
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }
    
    .wave{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 100%;
        z-index: -1;
    }
    
    .container{
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap :7rem;
        padding: 0 2rem;
    }
    
    .img{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .login-content{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }
    
    .img img{
        width: 500px;
    }
    
    form{
        width: 360px;
    }
    
    .login-content img{
        height: 100px;
    }
    
    .login-content h2{
        margin: 15px 0;
        color: #333;
        text-transform: uppercase;
        font-size: 2.9rem;
    }
    
    .login-content .input-div{
        position: relative;
        display: grid;
        grid-template-columns: 7% 93%;
        margin: 25px 0;
        padding: 5px 0;
        border-bottom: 2px solid #d9d9d9;
    }
    
    .login-content .input-div.one{
        margin-top: 0;
    }
    
    .i{
        color: #d9d9d9;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .i i{
        transition: .3s;
    }
    
    .input-div > div{
        position: relative;
        height: 45px;
    }
    
    .input-div > div > h5{
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-size: 18px;
        transition: .3s;
    }
    
    .input-div:before, .input-div:after{
        content: '';
        position: absolute;
        bottom: -2px;
        width: 0%;
        height: 2px;
        background-color: #38d39f;
        transition: .4s;
    }
    
  .........完整代码请登录后点击上方下载按钮下载查看