css+svg简洁登录页面表单效果代码-html代码-BFW代码库

css+svg简洁登录页面表单效果代码

代码语言：html

代码描述：css+svg简洁登录页面表单效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        /* config.css */
    
    :root {
      --baseColor: #606468;
    }
    
    /* helpers/align.css */
    
    .align {
      display: grid;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      justify-items: center;
      place-items: center;
    }
    
    /* helpers/grid.css */
    
    .grid {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      max-width: 20rem;
    }
    
    /* helpers/hidden.css */
    
    .hidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    
    /* helpers/icon.css */
    
    :root {
      --iconFill: var(--baseColor);
    }
    
    .icons {
      display: none;
    }
    
    .icon {
      height: 1em;
      display: inline-block;
      fill: #606468;
      fill: var(--iconFill);
      width: 1em;
      vertical-align: middle;
    }
    
    /* layout/base.css */
    
    :root {
      --htmlFontSize: 100%;
    
      --bodyBackgroundColor: #2c3338;
      --bodyColor: var(--baseColor);
      --bodyFontFamily: "Open Sans";
      --bodyFontFamilyFallback: sans-serif;
      --bodyFontSize: 0.875rem;
      --bodyFontWeight: 400;
      --bodyLineHeight: 1.5;
    }
    
    * {
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    
    html {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      font-size: 100%;
      font-size: var(--htmlFontSize);
    }
    
    body {
      background-color: #2c3338;
      background-color: var(--bodyBackgroundColor);
      color: #606468;
      color: var(--bodyColor);
      font-family: "Open Sans", sans-serif;
      font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
      font-size: 0.875rem;
      font-size: var(--bodyFontSize);
      font-weight: 400;
      font-weight: var(--bodyFontWeight);
      line-height: 1.5;
      line-height: var(--bodyLineHeight);
      margin: 0;
      min-height: 100vh;
    }
    
    /* modules/anchor.css */
    
    :root {
      --anchorColor: #eee;
    }
    
    a {
      color: #eee;
      color: var(--anchorColor);
      outline: 0;
      text-decoration: none;
    }
    
    a:focus,
    a:hover {
      text-decoration: underline;
    }
    
    /* modules/form.css */
    
    :root {
      --formFieldMargin: 0.875rem;
    }
    
    input {
      background-image: none;
      border: 0;
      color: inherit;
      font: inherit;
      margin: 0;
      outline: 0;
      padding: 0;
      -webkit-transition: background-color 0.3s;
      -o-transition: background-color 0.3s;
      transition: background-color 0.3s;
    }
    
    input[type="submit"] {
      cursor: pointer;
    }
    
    .form {
      margin: calc(0.875rem * -1);
      margin: calc(var(--formFieldMargin) * -1);
    }
    
    .form input[type="password"],
    .form input[type="text"],
    .form input[type="submit"] {
      width: 100%;
    }
    
    .form__field {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0.875rem;
      margin: var(--formFieldMargin);
    }
    
    .form__input {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }
    
    /* modules/login.css */
    
    :root {
      --loginBorderRadus: 0.25rem;
      --loginColor: #eee;
    
      --loginInputBackgroundColor: #3b4148;
      --loginInputHoverBackgroundColor: #434a52;
    
      --loginLabelBackgroundColor: #363b41;
    
      --loginSubmitBackgroundColor: #ea4c88;
      --loginSubmitColor: #eee;
      --loginSubmitHoverBackgroundColor: #d44179;
    }
    
    .login {
      color: #eee;
      color: var(--loginColor);
    }
    
    .login label,
    .login input[type="text"],
    .login input[type="password"],
    .login input[type="submit"] {
      border-radius: 0.25rem;
      border-radius: var(--loginBorderRadus);
      padding: 1rem;
    }
    
    .login label {
      background-color: #363b41;
      background-color: .........完整代码请登录后点击上方下载按钮下载查看