div+css实现大气简洁中性自适应登录表单页面代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现大气简洁中性自适应登录表单页面代码

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

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

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap'>
    <style>
        :root {
          --background: 266, 16%, 92%;
          --text-primary: 0, 0%, 0%;
          /* Colors */
          --black: 0, 0%, 0%;
          --white: 0, 0%, 100%;
          --quite-gray: 0, 0%, 50%;
          --red: 347, 84%, 68%;
          --orange: 23, 84%, 68%;
          --yellow: 52, 84%, 68%;
          --green: 114, 84%, 68%;
          --teal: 163, 84%, 68%;
          --blue: 219, 84%, 68%;
          --purple: 279, 84%, 68%;
          --pink: 312, 84%, 68%;
          /* Gradients */
          --gradient: linear-gradient(90deg, hsla(var(--red), 1) 0%, hsla(var(--orange), 1) 12.5%, hsla(var(--yellow), 1) 25%, hsla(var(--green), 1) 37.5%, hsla(var(--teal), 1) 50%, hsla(var(--blue), 1) 62.5%, hsla(var(--blue), 1) 75%, hsla(var(--purple), 1) 87.5%, hsla(var(--pink), 1) 100%);
          /* Sizes */
          --heading-large: 5.6rem;
          --heading-medium: 3.6rem;
          --heading-small: 2.4rem;
          --paragraph: 1.11rem;
          /* misc */
          --transition-main: .175, .685, .32;
          /* Fonts */
          --font-main: "Poppins";
        }
        *, *::before, *::after {
            box-sizing: inherit;
        }
        html, body {
            margin: 0;
            width: 100%;
            color: hsl(var(--text-primary));
            font-family: var(--font-main);
            background-color: hsl(var(--background));
            -webkit-font-smoothing: antialiased;
            scroll-behavior: smooth;
            box-sizing: border-box;
        }
        main {
          min-height: 100vh;
        }
        h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }
        h1 {
            font-size: var(--heading-large);
        }
        h2 {
            font-size: var(--heading-medium);
        }
        h3 {
            font-size: var(--heading-small);
        }
        h4 {
            font-size: calc(var(--heading-small) - .2rem);
        }
        h5 {
            font-size: calc(var(--heading-small) - .4rem);
        }
        h6 {
            font-size: calc(var(--heading-small) - .6rem);
        }
        h1, h2 {
            font-weight: 900;
        }
        h3, h4, h5, h6 {
            font-weight: 800;
        }
        p {
            margin: 0;
            font-size: var(--paragraph);
        }
        a {
            color: hsla(var(--primary), 1);
            font-size: var(--paragraph);
            text-decoration: underline;
        }
        a:visited {
            color: hsla(var(--primary), .5);
        }
        form {
            margin: 0;
        }
        fieldset {
            margin: 0;
            padding: .5em 0;
            border: none;
        }
        input {
            padding: .8em 1.2em;
            font-size: var(--paragraph);
            background-color: hsl(var(--grooble));
            border: 2px solid hsl(var(--grooble));
            outline: none;
        }
        textarea {
            padding: .8em 1.2em;
            font-size: var(--paragraph);
            font-family: var(--font-main);
            background-color: hsl(var(--grooble));
            border: 2px solid hsl(var(--grooble));
            outline: none;
        }
        input, textarea {
            transition: all .2s ease-in-out;
        }
        input:hover, input:focus, textarea:hover, textarea:focus {
            box-shadow:
                    0 0 0 2px hsl(var(--black)),
                    0 0 0 3px hsl(var(--white));
            border: 2px solid transparent;
        }
        /* Classes */
        .flexbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .flexbox-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .flexbox-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        /* Columns */
        .flexbox-col {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .flexbox-col-left {
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: flex-start;
        }
        .flexbox-col-left-ns {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: flex-start;
        }
        .flexbox-col-right {
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
            align-items: flex-end;
        }
        .flexbox-col-start-center {
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: center;
        }
        /* Spacings */
        .flexbox-space-bet {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /* Button */
        button {
            padding: .8em 1.2em;
            border: 1px solid hsl(var(--black));
            background-color: hsl(var(--background));
            font-size: var(--paragraph);
            cursor: pointer;
            outline: none;
        }
        button:focus {
            box-shadow:
                    0 0 0 2px hsl(var(--black)),
                    0 0 0 3px hsl(var(--white));
            border: 1px solid transparent;
        }
        .btn-primary-gray {
            color: hsl(var(--black)) !important;
            background: hsl(var(--white)) !important;
        }
        .button, .btn-secondary {
            margin: 0;
            width: 100%;
            position: relative;
            padding: 1.2em 1.8em;
            letter-spacing: .025em;
            color: hsl(var(--background));
            font-size: var(--paragraph);
            background: var(--gradient);
            background-size: 500%;
            border-radius: 5em;
            border: none;
            transform: scaleX(1);
            transition: transform .3s cubic-bezier(var(--transition-main), 1.275), filter .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 7.5s cubic-bezier(var(--transition-main), .955);
        }
        .button {
            transition: transform .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 17.5s cubic-bezier(var(--transition-main), .955);
        }
        .button, .button .btn-secondary {
            bottom: 0;
            background-position: 0 50%;
        }
        .button .btn-secondary {
            left: 0;
            width: 100%;
            position: absolute;
            filter: blur(1rem);
            transform: scale3d(.85, .95, 1);
            transition: transform .3s cubic-bezier(var(--transition-main), 1.275), filter .3s cubic-bezier(var(--transition-main), 1.275), bottom .3s cubic-bezier(var(--transition-main), 1.275), background-position 7.5s cubic-bezier(var(--transition-main), .955), opacity 3s cubic-bezier(var(--transition-main), 1.275);
            opacity: .5;
            z-index: -1;
        }
        .button:focus {
            outline: none;
        }
        .button:hover {
            bottom: 2px;
            transform: scale3d(1.1, 1.1, 1);
            background-position: 100% 50%;
            outline: none;
        }
        .btn-secondary, .button:hover .btn-secondary {
            bottom: -5px;
            background-position: 100% 50%;
            filter: blur(1.6rem);
            opacity: .8;
        }
        .button ion-icon {
            margin: 0 .5em .075em 0;
        }
        /* Main */
        .view-width {
            width: 70%;
        }
        /* Login */
        .login-wrapper {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        /* Login Form */
        .login {
            position: relative;
            z-index: 10;
        }
        .login-inner {
            width: 100%;
        }
        .login-form {
            padding: 3em;
            background-color: hsl(var(--background));
            box-shadow: 0 17px 30px -10px hsla(var(--black), .125);
            border-radius: .75em;
.........完整代码请登录后点击上方下载按钮下载查看