css实现3d浮雕式中性登录表单效果代码-html代码-BFW代码库

css实现3d浮雕式中性登录表单效果代码

代码语言：html

代码描述：css实现3d浮雕式中性登录表单效果代码

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

<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">
    <style>
        *{
        font-family: 'Inter',Arial, Helvetica, sans-serif;
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
    }
    *::selection{
        background-color: #c7c9ca;
    }
    body{
        background-color: #ecf0f3;
        margin: 0px;
        padding: 0px;
    }
    .lead { font-size: 1.5rem; font-weight: 300; }
    .container { margin: 150px auto; max-width: 960px; }
    .box{
        margin: auto;
        box-sizing: border-box;
        margin-top: 30px;
        height:500px;
        padding: 80px 40px;
        width:340px;
        border-radius: 35px;
        background-color: #ecf0f3;
        box-shadow: -8px -8px 8px #feffff, 8px 8px 8px #161b1d2f;
        /* box-shadow: -5px -5px 5px #feffff, 5px 5px 5px #161b1d2f; */
        /* box-shadow: inset 5px 5px 5px #cbced1,
            inset -5px -5px 5px #ffffff; */
    }
    /* .box:hover{
        box-shadow: inset 5px 5px 5px #cbced1,
            inset -5px -5px 5px #ffffff;
    } */
    .box label{
        font-size: 16px;
        font-weight: 500;
        color:#858686;
        /* margin-bottom: 10px; */
    }
    .box .input-box{
        width:100%;
        height: 35px;
        padding-left: 20px;
        border: none;
        color:#858686;
        margin-top: 10px;
        background-color: #ecf0f3;
        outline: none;
        border-radius: 20px;
        box-shadow: inset 5px 5px 5px #cbced1,
            inset -5px -5px 5px #ffffff;
    }
    .box .input-box::placeholder{
        color:#9ea0a0;
    }
    .forget{
        margin-top:15px;
    }
    .forget .fg a{
        text-decoration: none;
        font-size: 13px;
        color:#8f8c8c;
        line-height: 24px;
    }
    .forget .fg{
        display: inline-block;
        margin-left: 58%;
        font-size: 12px;
    }
    .forget .fg:hover{
        text-decoration: underline;
        text-decoration-color: #b4b8b8;
    }
    .forget .checkbox-label{
        display:block;
        position: relative;
        cursor: pointer;
        font-size:22px;
        line-height: 22px;
    }
    .label-text{
        color:#8f8c8c;
        display: inline-block;
        /* width: 100%; */
        position: absolute;
        font-weight: 500;
        left:12%;
        font-size: 13px;
    }
    .forget .checkbox-label input{
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    
    .checkbox-label .checkbox-custom{
        position: absolute;
        top:0;
        left:0px;
        height:20px;
        width:20px;
        background-color: #ecf0f3;
        border-radius: 5px;
        border: none;
        box-shadow:inset 3px 3px 3px #cbced1, inset -3px -3px 3px #ffff;
    }
    .checkbox-label input:checked ~ .checkbox-custom{
        background-color: #ecf0f3;
        border-radius: 5px;
        -webkit-transform: rotate(0deg) scale(1);
        -ms-transform: rotate(0deg) scale(1);
        transform:rotate(0deg) scale(1);
        opacity: 1;
        border:none;
        box-shadow: -4px -4px 4px #feffff, 4px 4px 4px #161b1d2f;
    }
    .checkbox-label .checkbox-custom::after{
        position: absolute;
        content:"";
        left:10px;
        top:10px;
        height:0px;
        width:0px;
        border-radius:5px;
        border:solid #635f5f;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(0deg) scale(0);
        -ms-transform: rotate(0deg) scale(0);
        transform: rotate(0deg) scale(0);
        opacity:1;
        transition: all 0.3s ease-out;
    }
    .checkbox-label input:checked ~ .checkbox-custom::after {
     .........完整代码请登录后点击上方下载按钮下载查看