源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 六个好看实用的html简单登录页面【非常实用】 [打印本页]

作者: 欧阳锋    时间: 2022-12-30 19:07
标题: 六个好看实用的html简单登录页面【非常实用】
html登录页面是每个前端的入门小知识,本文主要介绍了六个好看实用的html简单登录页面小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


本人找到了六个html登录页面,感觉还行,也挺好看的。

效果一



代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         html {
  13.             height: 100%;
  14.         }
  15.         body {
  16.             height: 100%;
  17.         }
  18.         .container {
  19.             height: 100%;
  20.             background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  21.         }
  22.         .login-wrapper {
  23.             background-color: #fff;
  24.             width: 358px;
  25.             height: 588px;
  26.             border-radius: 15px;
  27.             padding: 0 50px;
  28.             position: relative;
  29.             left: 50%;
  30.             top: 50%;
  31.             transform: translate(-50%, -50%);
  32.         }
  33.         .header {
  34.             font-size: 38px;
  35.             font-weight: bold;
  36.             text-align: center;
  37.             line-height: 200px;
  38.         }
  39.         .input-item {
  40.             display: block;
  41.             width: 100%;
  42.             margin-bottom: 20px;
  43.             border: 0;
  44.             padding: 10px;
  45.             border-bottom: 1px solid rgb(128, 125, 125);
  46.             font-size: 15px;
  47.             outline: none;
  48.         }
  49.         .input-item:placeholder {
  50.             text-transform: uppercase;
  51.         }
  52.         .btn {
  53.             text-align: center;
  54.             padding: 10px;
  55.             width: 100%;
  56.             margin-top: 40px;
  57.             background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  58.             color: #fff;
  59.         }
  60.         .msg {
  61.             text-align: center;
  62.             line-height: 88px;
  63.         }
  64.         a {
  65.             text-decoration-line: none;
  66.             color: #abc1ee;
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71.     <div class="container">
  72.         <div class="login-wrapper">
  73.             <div class="header">Login</div>
  74.             <div class="form-wrapper">
  75.                 <input type="text" name="username" placeholder="username" class="input-item">
  76.                 <input type="password" name="password" placeholder="password" class="input-item">
  77.                 <div class="btn">Login</div>
  78.             </div>
  79.             <div class="msg">
  80.                 Don't have account?
  81.                 <a href="#">Sign up</a>
  82.             </div>
  83.         </div>
  84.     </div>
  85. </body>
  86. </html>
复制代码

效果二



源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         html, body {
  13.             height: 100%;
  14.             height: 100%;
  15.         }
  16.         .login {
  17.             width: 358px;
  18.             height: 588px;
  19.             border-radius: 15px;
  20.             padding: 0 50px;
  21.             position: relative;
  22.             left: 50%;
  23.             top: 50%;
  24.             transform: translate(-50%, -50%);
  25.             background-color: #282c34;
  26.         }
  27.         .header {
  28.             font-size: 38px;
  29.             font-weight: bold;
  30.             text-align: center;
  31.             line-height: 200px;
  32.             color: #61dafb;
  33.         }
  34.         .container {
  35.             height: 30px;
  36.             width: 250px;
  37.             position: absolute;
  38.             left: 50%;
  39.             top: 40%;
  40.             transform: translate(-50%, -50%);
  41.         }

  42.         input {
  43.             width: 100%;
  44.             height: 100%;
  45.             position: relative;
  46.             outline: none;
  47.             border: none;
  48.             box-sizing: border-box;
  49.             padding-left: 5px;
  50.             background-color: #282c34;
  51.             color: #61dafb;
  52.             caret-color: #61dafb;
  53.         }
  54.         input::placeholder {
  55.             color: #61dafb;
  56.         }

  57.         span {
  58.             position: absolute;
  59.             content: "";
  60.             display: block;
  61.             background-color: #61dafb;
  62.             transition: transform .1s ease-in-out;
  63.         }
  64.         .top,
  65.         .bottom {
  66.             left: 0px;
  67.             right: 0px;
  68.             height: 2px;
  69.         }
  70.         .left,
  71.         .right {
  72.             top: 0px;
  73.             bottom: 0px;
  74.             width: 2px;
  75.             transform: scaleY(0);
  76.         }
  77.         .top {
  78.             top: 0px;
  79.             transform: scaleX(0);
  80.             transform-origin: left center;
  81.             transition-delay: .2s;
  82.         }
  83.         .left {
  84.             left: 0px;
  85.             transform-origin: bottom center;
  86.             transition-delay: .3s;
  87.         }
  88.         .bottom {
  89.             bottom: 0px;
  90.         }
  91.         .right {
  92.             right: 0px;
  93.             transform-origin: top center;
  94.             transition-delay: .1s;
  95.         }
  96.         input:focus ~ .right {
  97.             transform: scaleY(1);
  98.             transform-origin: bottom center;
  99.         }
  100.         input:focus ~ .left {
  101.             transform: scaleY(1);
  102.             transform-origin: top center;
  103.         }
  104.         input:focus ~ .top {
  105.             transform: scaleY(1);
  106.             transform-origin: right center;
  107.         }
  108.         .container1 {
  109.             height: 30px;
  110.             width: 250px;
  111.             position: absolute;
  112.             left: 50%;
  113.             top: 50%;
  114.             transform: translate(-50%, -50%);
  115.         }
  116.         .btn {
  117.             position: absolute;
  118.             left: 50%;
  119.             top: 54%;
  120.             transform: translate(-50%, -50%);
  121.             text-align: center;
  122.             padding: 5px;
  123.             width: 52%;
  124.             margin-top: 40px;
  125.             background-color: #61dafb;
  126.             color: #fff;
  127.         }
  128.     </style>
  129. </head>
  130. <body>
  131.     <div class="login">
  132.         <div class="header">登录</div>
  133.         <div class="container">
  134.             <input type="text" placeholder="请输入用户名">
  135.             <span class="left"></span>
  136.             <span class="right"></span>
  137.             <span class="top"></span>
  138.             <span class="bottom"></span>
  139.         </div>
  140.         <div class="container1">
  141.             <input type="password" placeholder="请输入密码">
  142.             <span class="left"></span>
  143.             <span class="right"></span>
  144.             <span class="top"></span>
  145.             <span class="bottom"></span>
  146.         </div>
  147.         <div class="btn">登录</div>
  148.     </div>
  149. </body>
  150. </html>
复制代码


效果三



源码

  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     body {
  9.       background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
  10.       background-size: 100% 130%;
  11.     }

  12.     #login_box {
  13.       width: 20%;
  14.       height: 400px;
  15.       background-color: #00000060;
  16.       margin: auto;
  17.       margin-top: 10%;
  18.       text-align: center;
  19.       border-radius: 10px;
  20.       padding: 50px 50px;
  21.     }

  22.     h2 {
  23.       color: #ffffff90;
  24.       margin-top: 5%;
  25.     }

  26.     #input-box {
  27.       margin-top: 5%;
  28.     }

  29.     span {
  30.       color: #fff;
  31.     }

  32.     input {
  33.       border: 0;
  34.       width: 60%;
  35.       font-size: 15px;
  36.       color: #fff;
  37.       background: transparent;
  38.       border-bottom: 2px solid #fff;
  39.       padding: 5px 10px;
  40.       outline: none;
  41.       margin-top: 10px;
  42.     }

  43.     button {
  44.       margin-top: 50px;
  45.       width: 60%;
  46.       height: 30px;
  47.       border-radius: 10px;
  48.       border: 0;
  49.       color: #fff;
  50.       text-align: center;
  51.       line-height: 30px;
  52.       font-size: 15px;
  53.       background-image: linear-gradient(to right, #30cfd0, #330867);
  54.     }

  55.     #sign_up {
  56.       margin-top: 45%;
  57.       margin-left: 60%;
  58.     }

  59.     a {
  60.       color: #b94648;
  61.     }
  62.   </style>
  63. </head>

  64. <body>
  65.   <div id="login_box">
  66.     <h2>LOGIN</h2>
  67.     <div id="input_box">
  68.       <input type="text" placeholder="请输入用户名">
  69.     </div>
  70.     <div class="input_box">
  71.       <input type="password" placeholder="请输入密码">
  72.     </div>
  73.     <button>登录</button><br>
  74.   </div>
  75. </body>
  76. </html>
复制代码

效果四



源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         html {
  13.             height: 100%;
  14.         }
  15.         body {
  16.             background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
  17.         }
  18.         .login-container {
  19.             width: 600px;
  20.             height: 315px;
  21.             margin: 0 auto;
  22.             margin-top: 10%;
  23.             border-radius: 15px;
  24.             box-shadow: 0 10px 50px 0px rbg(59, 45, 159);
  25.             background-color: rgb(95, 76, 194);
  26.         }
  27.         .left-container {
  28.             display: inline-block;
  29.             width: 330px;
  30.             border-top-left-radius: 15px;
  31.             border-bottom-left-radius: 15px;
  32.             padding: 60px;
  33.             background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));
  34.         }
  35.         .title {
  36.             color: #fff;
  37.             font-size: 18px;
  38.             font-weight: 200;
  39.         }
  40.         .title span {
  41.             border-bottom: 3px solid rgb(237, 221, 22);
  42.         }
  43.         .input-container {
  44.             padding: 20px 0;
  45.         }
  46.         input {
  47.             border: 0;
  48.             background: none;
  49.             outline: none;
  50.             color: #fff;
  51.             margin: 20px 0;
  52.             display: block;
  53.             width: 100%;
  54.             padding: 5px 0;
  55.             transition: .2s;
  56.             border-bottom: 1px solid rgb(199, 191, 219);
  57.         }
  58.         input:hover {
  59.             border-bottom-color: #fff;
  60.         }
  61.         ::-webkit-input-placeholder {
  62.             color: rgb(199, 191, 219);
  63.         }
  64.         .message-container {
  65.             font-size: 14px;
  66.             transition: .2s;
  67.             color: rgb(199, 191, 219);
  68.             cursor: pointer;
  69.         }
  70.         .message-container:hover {
  71.             color: #fff;
  72.         }
  73.         .right-container {
  74.             width: 145px;
  75.             display: inline-block;
  76.             height: calc(100% - 120px);
  77.             vertical-align: top;
  78.             padding: 60px 0;
  79.         }
  80.         .regist-container {
  81.             text-align: center;
  82.             color: #fff;
  83.             font-size: 18px;
  84.             font-weight: 200;
  85.         }
  86.         .regist-container span {
  87.             border-bottom: 3px solid rgb(237, 221, 22);
  88.         }
  89.         .action-container {
  90.             font-size: 10px;
  91.             color: #fff;
  92.             text-align: center;
  93.             position: relative;
  94.             top: 200px;
  95.         }
  96.         .action-container span {
  97.             border: 1px solid rgb(237, 221, 22);
  98.             padding: 10px;
  99.             display: inline;
  100.             line-height: 20px;
  101.             border-radius: 20px;
  102.             position: absolute;
  103.             bottom: 10px;
  104.             left: calc(72px - 20px);
  105.             transition: .2s;
  106.             cursor: pointer;
  107.         }
  108.         .action-container span:hover {
  109.             background-color: rgb(237, 221, 22);
  110.             color: rgb(95, 76, 194);
  111.         }
  112.     </style>
  113. </head>
  114. <body>
  115.     <div class="login-container">
  116.         <div class="left-container">
  117.             <div class="title"><span>登录</span></div>
  118.             <div class="input-container">
  119.                 <input type="text" name="username" placeholder="用户名">
  120.                 <input type="password" name="password" placeholder="密码">
  121.             </div>
  122.             <div class="message-container">
  123.                 <span>忘记密码</span>
  124.             </div>
  125.         </div>
  126.         <div class="right-container">
  127.             <div class="regist-container">
  128.                 <span class="regist">注册</span>
  129.             </div>
  130.             <div class="action-container">
  131.                 <span>提交</span>
  132.             </div>
  133.         </div>
  134.     </div>
  135. </body>
  136. </html>
复制代码


效果五



源码
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 * {
  9.                         margin: 0;
  10.                         padding: 0;
  11.                 }

  12.                 a {
  13.                         text-decoration: none;
  14.                 }

  15.                 input,
  16.                 button {
  17.                         background: transparent;
  18.                         border: 0;
  19.                         outline: none;
  20.                 }

  21.                 body {
  22.                         height: 100vh;
  23.                         background: linear-gradient(#141e30, #243b55);
  24.                         display: flex;
  25.                         justify-content: center;
  26.                         align-items: center;
  27.                         font-size: 16px;
  28.                         color: #03e9f4;
  29.                 }

  30.                 .loginBox {
  31.                         width: 400px;
  32.                         height: 364px;
  33.                         background-color: #0c1622;
  34.                         margin: 100px auto;
  35.                         border-radius: 10px;
  36.                         box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6);
  37.                         padding: 40px;
  38.                         box-sizing: border-box;
  39.                 }

  40.                 h2 {
  41.                         text-align: center;
  42.                         color: aliceblue;
  43.                         margin-bottom: 30px;
  44.                         font-family: 'Courier New', Courier, monospace;
  45.                 }

  46.                 .item {
  47.                         height: 45px;
  48.                         border-bottom: 1px solid #fff;
  49.                         margin-bottom: 40px;
  50.                         position: relative;
  51.                 }

  52.                 .item input {
  53.                         width: 100%;
  54.                         height: 100%;
  55.                         color: #fff;
  56.                         padding-top: 20px;
  57.                         box-sizing: border-box;
  58.                 }

  59.                 .item input:focus+label,
  60.                 .item input:valid+label {
  61.                         top: 0px;
  62.                         font-size: 2px;
  63.                 }

  64.                 .item label {
  65.                         position: absolute;
  66.                         left: 0;
  67.                         top: 12px;
  68.                         transition: all 0.5s linear;
  69.                 }

  70.                 .btn {
  71.                         padding: 10px 20px;
  72.                         margin-top: 30px;
  73.                         color: #03e9f4;
  74.                         position: relative;
  75.                         overflow: hidden;
  76.                         text-transform: uppercase;
  77.                         letter-spacing: 2px;
  78.                         left: 35%;
  79.                 }

  80.                 .btn:hover {
  81.                         border-radius: 5px;
  82.                         color: #fff;
  83.                         background: #03e9f4;
  84.                         box-shadow: 0 0 5px 0 #03e9f4,
  85.                                 0 0 25px 0 #03e9f4,
  86.                                 0 0 50px 0 #03e9f4,
  87.                                 0 0 100px 0 #03e9f4;
  88.                         transition: all 1s linear;
  89.                 }

  90.                 .btn>span {
  91.                         position: absolute;
  92.                 }

  93.                 .btn>span:nth-child(1) {
  94.                         width: 100%;
  95.                         height: 2px;
  96.                         background: -webkit-linear-gradient(left, transparent, #03e9f4);
  97.                         left: -100%;
  98.                         top: 0px;
  99.                         animation: line1 1s linear infinite;
  100.                 }

  101.                 @keyframes line1 {

  102.                         50%,
  103.                         100% {
  104.                                 left: 100%;
  105.                         }
  106.                 }

  107.                 .btn>span:nth-child(2) {
  108.                         width: 2px;
  109.                         height: 100%;
  110.                         background: -webkit-linear-gradient(top, transparent, #03e9f4);
  111.                         right: 0px;
  112.                         top: -100%;
  113.                         animation: line2 1s 0.25s linear infinite;
  114.                 }

  115.                 @keyframes line2 {

  116.                         50%,
  117.                         100% {
  118.                                 top: 100%;
  119.                         }
  120.                 }

  121.                 .btn>span:nth-child(3) {
  122.                         width: 100%;
  123.                         height: 2px;
  124.                         background: -webkit-linear-gradient(left, #03e9f4, transparent);
  125.                         left: 100%;
  126.                         bottom: 0px;
  127.                         animation: line3 1s 0.75s linear infinite;
  128.                 }

  129.                 @keyframes line3 {

  130.                         50%,
  131.                         100% {
  132.                                 left: -100%;
  133.                         }
  134.                 }

  135.                 .btn>span:nth-child(4) {
  136.                         width: 2px;
  137.                         height: 100%;
  138.                         background: -webkit-linear-gradient(top, transparent, #03e9f4);
  139.                         left: 0px;
  140.                         top: 100%;
  141.                         animation: line4 1s 1s linear infinite;
  142.                 }

  143.                 @keyframes line4 {

  144.                         50%,
  145.                         100% {
  146.                                 top: -100%;
  147.                         }
  148.                 }
  149.         </style>
  150. </head>

  151. <body>
  152.         <div class="loginBox">
  153.                 <h2>login</h2>
  154.                 <form action="">
  155.                         <div class="item">
  156.                                 <input type="text" required>
  157.                                 <label for="">userName</label>
  158.                         </div>
  159.                         <div class="item">
  160.                                 <input type="password" required>
  161.                                 <label for="">password</label>
  162.                         </div>
  163.                         <button class="btn">submit
  164.                                 <span></span>
  165.                                 <span></span>
  166.                                 <span></span>
  167.                                 <span></span>
  168.                         </button>
  169.                 </form>
  170.         </div>
  171. </body>
  172. </html>
复制代码

效果六



源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- https://codepen.io/danielkvist/pen/LYNVyPL -->
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     :root {
  10.       /* COLORS */
  11.       --white: #e9e9e9;
  12.       --gray: #333;
  13.       --blue: #0367a6;
  14.       --lightblue: #008997;

  15.       /* RADII */
  16.       --button-radius: 0.7rem;

  17.       /* SIZES */
  18.       --max-width: 758px;
  19.       --max-height: 420px;

  20.       font-size: 16px;
  21.       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  22.         Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  23.     }

  24.     body {
  25.       align-items: center;
  26.       background-color: var(--white);
  27.       background: url("https://res.cloudinary.com/dbhnlktrv/image/upload/v1599997626/background_oeuhe7.jpg");
  28.       /* 决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。 */
  29.       /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
  30.       background-attachment: fixed;
  31.       background-position: center;
  32.       background-repeat: no-repeat;
  33.       background-size: cover;
  34.       display: grid;
  35.       height: 100vh;
  36.       place-items: center;
  37.     }

  38.     .form__title {
  39.       font-weight: 300;
  40.       margin: 0;
  41.       margin-bottom: 1.25rem;
  42.     }

  43.     .link {
  44.       color: var(--gray);
  45.       font-size: 0.9rem;
  46.       margin: 1.5rem 0;
  47.       text-decoration: none;
  48.     }

  49.     .container {
  50.       background-color: var(--white);
  51.       border-radius: var(--button-radius);
  52.       box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
  53.         0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  54.       height: var(--max-height);
  55.       max-width: var(--max-width);
  56.       overflow: hidden;
  57.       position: relative;
  58.       width: 100%;
  59.     }

  60.     .container__form {
  61.       height: 100%;
  62.       position: absolute;
  63.       top: 0;
  64.       transition: all 0.6s ease-in-out;
  65.     }

  66.     .container--signin {
  67.       left: 0;
  68.       width: 50%;
  69.       z-index: 2;
  70.     }

  71.     .container.right-panel-active .container--signin {
  72.       transform: translateX(100%);
  73.     }

  74.     .container--signup {
  75.       left: 0;
  76.       opacity: 0;
  77.       width: 50%;
  78.       z-index: 1;
  79.     }

  80.     .container.right-panel-active .container--signup {
  81.       animation: show 0.6s;
  82.       opacity: 1;
  83.       transform: translateX(100%);
  84.       z-index: 5;
  85.     }

  86.     .container__overlay {
  87.       height: 100%;
  88.       left: 50%;
  89.       overflow: hidden;
  90.       position: absolute;
  91.       top: 0;
  92.       transition: transform 0.6s ease-in-out;
  93.       width: 50%;
  94.       z-index: 100;
  95.     }

  96.     .container.right-panel-active .container__overlay {
  97.       transform: translateX(-100%);
  98.     }

  99.     .overlay {
  100.       background-color: var(--lightblue);
  101.       background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg");
  102.       background-attachment: fixed;
  103.       background-position: center;
  104.       background-repeat: no-repeat;
  105.       background-size: cover;
  106.       height: 100%;
  107.       left: -100%;
  108.       position: relative;
  109.       transform: translateX(0);
  110.       transition: transform 0.6s ease-in-out;
  111.       width: 200%;
  112.     }

  113.     .container.right-panel-active .overlay {
  114.       transform: translateX(50%);
  115.     }

  116.     .overlay__panel {
  117.       align-items: center;
  118.       display: flex;
  119.       flex-direction: column;
  120.       height: 100%;
  121.       justify-content: center;
  122.       position: absolute;
  123.       text-align: center;
  124.       top: 0;
  125.       transform: translateX(0);
  126.       transition: transform 0.6s ease-in-out;
  127.       width: 50%;
  128.     }

  129.     .overlay--left {
  130.       transform: translateX(-20%);
  131.     }

  132.     .container.right-panel-active .overlay--left {
  133.       transform: translateX(0);
  134.     }

  135.     .overlay--right {
  136.       right: 0;
  137.       transform: translateX(0);
  138.     }

  139.     .container.right-panel-active .overlay--right {
  140.       transform: translateX(20%);
  141.     }

  142.     .btn {
  143.       background-color: var(--blue);
  144.       background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
  145.       border-radius: 20px;
  146.       border: 1px solid var(--blue);
  147.       color: var(--white);
  148.       cursor: pointer;
  149.       font-size: 0.8rem;
  150.       font-weight: bold;
  151.       letter-spacing: 0.1rem;
  152.       padding: 0.9rem 4rem;
  153.       text-transform: uppercase;
  154.       transition: transform 80ms ease-in;
  155.     }

  156.     .form>.btn {
  157.       margin-top: 1.5rem;
  158.     }

  159.     .btn:active {
  160.       transform: scale(0.95);
  161.     }

  162.     .btn:focus {
  163.       outline: none;
  164.     }

  165.     .form {
  166.       background-color: var(--white);
  167.       display: flex;
  168.       align-items: center;
  169.       justify-content: center;
  170.       flex-direction: column;
  171.       padding: 0 3rem;
  172.       height: 100%;
  173.       text-align: center;
  174.     }

  175.     .input {
  176.       background-color: #fff;
  177.       border: none;
  178.       padding: 0.9rem 0.9rem;
  179.       margin: 0.5rem 0;
  180.       width: 100%;
  181.     }

  182.     @keyframes show {

  183.       0%,
  184.       49.99% {
  185.         opacity: 0;
  186.         z-index: 1;
  187.       }

  188.       50%,
  189.       100% {
  190.         opacity: 1;
  191.         z-index: 5;
  192.       }
  193.     }
  194.   </style>
  195. </head>

  196. <body>
  197.   <div class="container right-panel-active">
  198.     <!-- Sign Up -->
  199.     <div class="container__form container--signup">
  200.       <form action="#" class="form" id="form1">
  201.         <h2 class="form__title">Sign Up</h2>
  202.         <input type="text" placeholder="User" class="input" />
  203.         <input type="email" placeholder="Email" class="input" />
  204.         <input type="password" placeholder="Password" class="input" />
  205.         <button class="btn">Sign Up</button>
  206.       </form>
  207.     </div>

  208.     <!-- Sign In -->
  209.     <div class="container__form container--signin">
  210.       <form action="#" class="form" id="form2">
  211.         <h2 class="form__title">Sign In</h2>
  212.         <input type="email" placeholder="Email" class="input" />
  213.         <input type="password" placeholder="Password" class="input" />
  214.         <a href="#" class="link">Forgot your password?</a>
  215.         <button class="btn">Sign In</button>
  216.       </form>
  217.     </div>

  218.     <!-- Overlay -->
  219.     <div class="container__overlay">
  220.       <div class="overlay">
  221.         <div class="overlay__panel overlay--left">
  222.           <button class="btn" id="signIn">Sign In</button>
  223.         </div>
  224.         <div class="overlay__panel overlay--right">
  225.           <button class="btn" id="signUp">Sign Up</button>
  226.         </div>
  227.       </div>
  228.     </div>
  229.   </div>

  230.   <script>
  231.     const signInBtn = document.getElementById("signIn");
  232.     const signUpBtn = document.getElementById("signUp");
  233.     const fistForm = document.getElementById("form1");
  234.     const secondForm = document.getElementById("form2");
  235.     const container = document.querySelector(".container");

  236.     signInBtn.addEventListener("click", () => {
  237.       container.classList.remove("right-panel-active");
  238.     });

  239.     signUpBtn.addEventListener("click", () => {
  240.       container.classList.add("right-panel-active");
  241.     });

  242.     fistForm.addEventListener("submit", (e) => e.preventDefault());
  243.     secondForm.addEventListener("submit", (e) => e.preventDefault());

  244.   </script>
  245. </body>

  246. </html>
复制代码

到此这篇关于六个好看实用的html简单登录页面小结的文章就介绍到这了,更多相关html登录页面内容请搜索锦尚中国以前的文章或继续浏览下面的相关文章,希望大家以后多多支持锦尚中国!






欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3