css布局简洁登录注册二合一表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局简洁登录注册二合一表单效果代码

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

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

<head>
    <meta charset="UTF-8">
    <title>Animated Login and Sign up</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        /**
     * * General variables
     * */
    /**
     * * General configs
     * */
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: "Montserrat", sans-serif;
      font-size: 12px;
      line-height: 1em;
    }
    
    button {
      background-color: transparent;
      padding: 0;
      border: 0;
      outline: 0;
      cursor: pointer;
    }
    
    input {
      background-color: transparent;
      padding: 0;
      border: 0;
      outline: 0;
    }
    input[type=submit] {
      cursor: pointer;
    }
    input::-moz-placeholder {
      font-size: 0.85rem;
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      letter-spacing: 0.1rem;
      color: #ccc;
    }
    input:-ms-input-placeholder {
      font-size: 0.85rem;
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      letter-spacing: 0.1rem;
      color: #ccc;
    }
    input::placeholder {
      font-size: 0.85rem;
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      letter-spacing: 0.1rem;
      color: #ccc;
    }
    
    /**
     * * Bounce to the left side
     * */
    @-webkit-keyframes bounceLeft {
      0% {
        transform: translate3d(100%, -50%, 0);
      }
      50% {
        transform: translate3d(-30px, -50%, 0);
      }
      100% {
        transform: translate3d(0, -50%, 0);
      }
    }
    @keyframes bounceLeft {
      0% {
        transform: translate3d(100%, -50%, 0);
      }
      50% {
        transform: translate3d(-30px, -50%, 0);
      }
      100% {
        transform: translate3d(0, -50%, 0);
      }
    }
    /**
     * * Bounce to the left side
     * */
    @-webkit-keyframes bounceRight {
      0% {
        transform: translate3d(0, -50%, 0);
      }
      50% {
        transform: translate3d(calc(100% + 30px), -50%, 0);
      }
      100% {
        transform: translate3d(100%, -50%, 0);
      }
    }
    @keyframes bounceRight {
      0% {
        transform: translate3d(0, -50%, 0);
      }
      50% {
        transform: translate3d(calc(100% + 30px), -50%, 0);
      }
      100% {
        transform: translate3d(100%, -50%, 0);
      }
    }
    /**
     * * Show Sign Up form
     * */
    @-webkit-keyframes showSignUp {
      100% {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
      }
    }
    @keyframes showSignUp {
      100% {
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0);
      }
    }
    /**
     * * Page background
     * */
    .user {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      background: #ccc;
      background-size: cover;
    }
    .user_options-container {
      position: relative;
      width: 80%;
    }
    .user_options-text {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background-color: rgba(34, 34, 34, 0.85);
      border-radius: 3px;
    }
    
    /**
     * * Registered and Unregistered user box and text
     * */
    .user_options-registered,
    .user_options-unregistered {
      width: 50%;
      padding: 75px 45px;
      color: #fff;
      font-weight: 300;
    }
    
    .user_registered-title,
    .user_unregistered-title {
      margin-bottom: 15px;
      font-size: 1.66rem;
      line-height: 1em;
    }
    
    .user_unregistered-text,
    .user_registered-text {
      font-size: 0.83rem;
      line-height: 1.4em;
    }
    
    .user_registered-login,
    .user_unregistered-signup {
      margin-top: 30px;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 10px 30px;
      color: #fff;
      text-transform: uppercase;
      line-height: 1em;
      letter-spacing: 0.2rem;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }
    .user_registered-login:hover,
    .user_unregistered-signup:hover {
      color: rgba(34, 34, 34, 0.85);
      background-color: #ccc;
    }
    
    /**
     * * Login and signup forms
     * */
    .user_options-forms {
      position: absolute;
      top: 50%;
      left: 30px;
      width: calc(50% - 30px);
      min-height: 420px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 2px 0 15px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      transform: translate3d(100%, -50%, 0);
      transition: transform 0.4s ease-in-out;
    }
    .user_options-forms .user_forms-login {
      transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    }
    .user_options-forms .forms_title {
      margin-bottom: 45px;
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1em;
      text-transform: uppercase;
      color: #e8716d;
      letter-spacing: 0.1rem;
    }
    .user_options-forms .forms_field:not(:last-of-type) {
      margin-bottom: 20px;
    }
    .user_options-forms .forms_field-input {
      width: 100%;
      border-bottom: 1px solid #ccc;
      padding: 6px 20px 6px 6px;
      font-family: "Montserrat", sans-serif;
      font-size: 1rem;
      font-weight: 300;
      color: gray;
      letter-spacing: 0.1rem;
      transition: border-color 0.2s ease-in-out;
    }
    .user_options-forms .forms_field-input:focus {
      border-color: gray;
    }
    .user_options-forms .forms_buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 35px;
    }
    .user_options-forms .forms_buttons-forgot {
      font-family: "Montserrat", sans-serif;
      letter-spacing: 0.1rem;
      color: #ccc;
      text-decoration: underline;
      transition: color 0.2s ease-in-out;
    }
    .user_options-forms .forms_buttons-forgot:hover {
      color: #b3b3b3;
    }
    .user_options-forms .forms_buttons-action {
      background-color: #e8716d;
      border-radius: 3px;
      padding: 10px 35px;
      font-size: 1rem;
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.1rem;
      transition: background-color 0.2s ease-in-out;
    }
    .user_options-forms .forms_buttons-action:hover {
      background-color: #e14641;
    }
    .user_optio.........完整代码请登录后点击上方下载按钮下载查看