自助购买VIP收藏本站将本站放到桌面
开启辅助访问 购买锦尚中国空间免费安装程序 请联系QQ278869155
源码论坛公告：本站是一个交流学习建站资源的社区论坛，旨在交流学习源码脚本等资源技术，欢迎大家投稿发言！ 【点击此处将锦尚放在桌面】

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

 找回密码
 会员注册

QQ登录

只需一步，快速开始

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛»论坛 › 网站源码(交流学习,共同进步) › 站长教程 › 六个好看实用的html简单登录页面【非常实用】
返回列表 发新帖
查看: 6692|回复: 0
打印 上一主题 下一主题

[CSS/Html] 六个好看实用的html简单登录页面【非常实用】

[复制链接]
欧阳锋

1175

主题

1564

帖子

9320

金币

超级版主

Rank: 8Rank: 8

积分
20328
跳转到指定楼层
1#
发表于 2022-12-30 19:07:02 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
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.         }

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

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


效果三



源码

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

  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.     body {
  10.       background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
  11.       background-size: 100% 130%;
  12.     }

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

  25.     h2 {
  26.       color: #ffffff90;
  27.       margin-top: 5%;
  28.     }

  30.     #input-box {
  31.       margin-top: 5%;
  32.     }

  34.     span {
  35.       color: #fff;
  36.     }

  38.     input {
  39.       border: 0;
  40.       width: 60%;
  41.       font-size: 15px;
  42.       color: #fff;
  43.       background: transparent;
  44.       border-bottom: 2px solid #fff;
  45.       padding: 5px 10px;
  46.       outline: none;
  47.       margin-top: 10px;
  48.     }

  50.     button {
  51.       margin-top: 50px;
  52.       width: 60%;
  53.       height: 30px;
  54.       border-radius: 10px;
  55.       border: 0;
  56.       color: #fff;
  57.       text-align: center;
  58.       line-height: 30px;
  59.       font-size: 15px;
  60.       background-image: linear-gradient(to right, #30cfd0, #330867);
  61.     }

  63.     #sign_up {
  64.       margin-top: 45%;
  65.       margin-left: 60%;
  66.     }

  68.     a {
  69.       color: #b94648;
  70.     }
  71.   </style>
  72. </head>

  74. <body>
  75.   <div id="login_box">
  76.     <h2>LOGIN</h2>
  77.     <div id="input_box">
  78.       <input type="text" placeholder="请输入用户名">
  79.     </div>
  80.     <div class="input_box">
  81.       <input type="password" placeholder="请输入密码">
  82.     </div>
  83.     <button>登录</button><br>
  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.             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">

  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.                 * {
  10.                         margin: 0;
  11.                         padding: 0;
  12.                 }

  14.                 a {
  15.                         text-decoration: none;
  16.                 }

  18.                 input,
  19.                 button {
  20.                         background: transparent;
  21.                         border: 0;
  22.                         outline: none;
  23.                 }

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

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

  46.                 h2 {
  47.                         text-align: center;
  48.                         color: aliceblue;
  49.                         margin-bottom: 30px;
  50.                         font-family: 'Courier New', Courier, monospace;
  51.                 }

  53.                 .item {
  54.                         height: 45px;
  55.                         border-bottom: 1px solid #fff;
  56.                         margin-bottom: 40px;
  57.                         position: relative;
  58.                 }

  60.                 .item input {
  61.                         width: 100%;
  62.                         height: 100%;
  63.                         color: #fff;
  64.                         padding-top: 20px;
  65.                         box-sizing: border-box;
  66.                 }

  68.                 .item input:focus+label,
  69.                 .item input:valid+label {
  70.                         top: 0px;
  71.                         font-size: 2px;
  72.                 }

  74.                 .item label {
  75.                         position: absolute;
  76.                         left: 0;
  77.                         top: 12px;
  78.                         transition: all 0.5s linear;
  79.                 }

  81.                 .btn {
  82.                         padding: 10px 20px;
  83.                         margin-top: 30px;
  84.                         color: #03e9f4;
  85.                         position: relative;
  86.                         overflow: hidden;
  87.                         text-transform: uppercase;
  88.                         letter-spacing: 2px;
  89.                         left: 35%;
  90.                 }

  92.                 .btn:hover {
  93.                         border-radius: 5px;
  94.                         color: #fff;
  95.                         background: #03e9f4;
  96.                         box-shadow: 0 0 5px 0 #03e9f4,
  97.                                 0 0 25px 0 #03e9f4,
  98.                                 0 0 50px 0 #03e9f4,
  99.                                 0 0 100px 0 #03e9f4;
  100.                         transition: all 1s linear;
  101.                 }

  103.                 .btn>span {
  104.                         position: absolute;
  105.                 }

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

  116.                 @keyframes line1 {

  118.                         50%,
  119.                         100% {
  120.                                 left: 100%;
  121.                         }
  122.                 }

  124.                 .btn>span:nth-child(2) {
  125.                         width: 2px;
  126.                         height: 100%;
  127.                         background: -webkit-linear-gradient(top, transparent, #03e9f4);
  128.                         right: 0px;
  129.                         top: -100%;
  130.                         animation: line2 1s 0.25s linear infinite;
  131.                 }

  133.                 @keyframes line2 {

  135.                         50%,
  136.                         100% {
  137.                                 top: 100%;
  138.                         }
  139.                 }

  141.                 .btn>span:nth-child(3) {
  142.                         width: 100%;
  143.                         height: 2px;
  144.                         background: -webkit-linear-gradient(left, #03e9f4, transparent);
  145.                         left: 100%;
  146.                         bottom: 0px;
  147.                         animation: line3 1s 0.75s linear infinite;
  148.                 }

  150.                 @keyframes line3 {

  152.                         50%,
  153.                         100% {
  154.                                 left: -100%;
  155.                         }
  156.                 }

  158.                 .btn>span:nth-child(4) {
  159.                         width: 2px;
  160.                         height: 100%;
  161.                         background: -webkit-linear-gradient(top, transparent, #03e9f4);
  162.                         left: 0px;
  163.                         top: 100%;
  164.                         animation: line4 1s 1s linear infinite;
  165.                 }

  167.                 @keyframes line4 {

  169.                         50%,
  170.                         100% {
  171.                                 top: -100%;
  172.                         }
  173.                 }
  174.         </style>
  175. </head>

  177. <body>
  178.         <div class="loginBox">
  179.                 <h2>login</h2>
  180.                 <form action="">
  181.                         <div class="item">
  182.                                 <input type="text" required>
  183.                                 <label for="">userName</label>
  184.                         </div>
  185.                         <div class="item">
  186.                                 <input type="password" required>
  187.                                 <label for="">password</label>
  188.                         </div>
  189.                         <button class="btn">submit
  190.                                 <span></span>
  191.                                 <span></span>
  192.                                 <span></span>
  193.                                 <span></span>
  194.                         </button>
  195.                 </form>
  196.         </div>
  197. </body>
  198. </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;

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

  19.       /* SIZES */
  20.       --max-width: 758px;
  21.       --max-height: 420px;

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

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

  43.     .form__title {
  44.       font-weight: 300;
  45.       margin: 0;
  46.       margin-bottom: 1.25rem;
  47.     }

  49.     .link {
  50.       color: var(--gray);
  51.       font-size: 0.9rem;
  52.       margin: 1.5rem 0;
  53.       text-decoration: none;
  54.     }

  56.     .container {
  57.       background-color: var(--white);
  58.       border-radius: var(--button-radius);
  59.       box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
  60.         0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  61.       height: var(--max-height);
  62.       max-width: var(--max-width);
  63.       overflow: hidden;
  64.       position: relative;
  65.       width: 100%;
  66.     }

  68.     .container__form {
  69.       height: 100%;
  70.       position: absolute;
  71.       top: 0;
  72.       transition: all 0.6s ease-in-out;
  73.     }

  75.     .container--signin {
  76.       left: 0;
  77.       width: 50%;
  78.       z-index: 2;
  79.     }

  81.     .container.right-panel-active .container--signin {
  82.       transform: translateX(100%);
  83.     }

  85.     .container--signup {
  86.       left: 0;
  87.       opacity: 0;
  88.       width: 50%;
  89.       z-index: 1;
  90.     }

  92.     .container.right-panel-active .container--signup {
  93.       animation: show 0.6s;
  94.       opacity: 1;
  95.       transform: translateX(100%);
  96.       z-index: 5;
  97.     }

  99.     .container__overlay {
  100.       height: 100%;
  101.       left: 50%;
  102.       overflow: hidden;
  103.       position: absolute;
  104.       top: 0;
  105.       transition: transform 0.6s ease-in-out;
  106.       width: 50%;
  107.       z-index: 100;
  108.     }

  110.     .container.right-panel-active .container__overlay {
  111.       transform: translateX(-100%);
  112.     }

  114.     .overlay {
  115.       background-color: var(--lightblue);
  116.       background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg");
  117.       background-attachment: fixed;
  118.       background-position: center;
  119.       background-repeat: no-repeat;
  120.       background-size: cover;
  121.       height: 100%;
  122.       left: -100%;
  123.       position: relative;
  124.       transform: translateX(0);
  125.       transition: transform 0.6s ease-in-out;
  126.       width: 200%;
  127.     }

  129.     .container.right-panel-active .overlay {
  130.       transform: translateX(50%);
  131.     }

  133.     .overlay__panel {
  134.       align-items: center;
  135.       display: flex;
  136.       flex-direction: column;
  137.       height: 100%;
  138.       justify-content: center;
  139.       position: absolute;
  140.       text-align: center;
  141.       top: 0;
  142.       transform: translateX(0);
  143.       transition: transform 0.6s ease-in-out;
  144.       width: 50%;
  145.     }

  147.     .overlay--left {
  148.       transform: translateX(-20%);
  149.     }

  151.     .container.right-panel-active .overlay--left {
  152.       transform: translateX(0);
  153.     }

  155.     .overlay--right {
  156.       right: 0;
  157.       transform: translateX(0);
  158.     }

  160.     .container.right-panel-active .overlay--right {
  161.       transform: translateX(20%);
  162.     }

  164.     .btn {
  165.       background-color: var(--blue);
  166.       background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
  167.       border-radius: 20px;
  168.       border: 1px solid var(--blue);
  169.       color: var(--white);
  170.       cursor: pointer;
  171.       font-size: 0.8rem;
  172.       font-weight: bold;
  173.       letter-spacing: 0.1rem;
  174.       padding: 0.9rem 4rem;
  175.       text-transform: uppercase;
  176.       transition: transform 80ms ease-in;
  177.     }

  179.     .form>.btn {
  180.       margin-top: 1.5rem;
  181.     }

  183.     .btn:active {
  184.       transform: scale(0.95);
  185.     }

  187.     .btn:focus {
  188.       outline: none;
  189.     }

  191.     .form {
  192.       background-color: var(--white);
  193.       display: flex;
  194.       align-items: center;
  195.       justify-content: center;
  196.       flex-direction: column;
  197.       padding: 0 3rem;
  198.       height: 100%;
  199.       text-align: center;
  200.     }

  202.     .input {
  203.       background-color: #fff;
  204.       border: none;
  205.       padding: 0.9rem 0.9rem;
  206.       margin: 0.5rem 0;
  207.       width: 100%;
  208.     }

  210.     @keyframes show {

  212.       0%,
  213.       49.99% {
  214.         opacity: 0;
  215.         z-index: 1;
  216.       }

  218.       50%,
  219.       100% {
  220.         opacity: 1;
  221.         z-index: 5;
  222.       }
  223.     }
  224.   </style>
  225. </head>

  227. <body>
  228.   <div class="container right-panel-active">
  229.     <!-- Sign Up -->
  230.     <div class="container__form container--signup">
  231.       <form action="#" class="form" id="form1">
  232.         <h2 class="form__title">Sign Up</h2>
  233.         <input type="text" placeholder="User" class="input" />
  234.         <input type="email" placeholder="Email" class="input" />
  235.         <input type="password" placeholder="Password" class="input" />
  236.         <button class="btn">Sign Up</button>
  237.       </form>
  238.     </div>

  240.     <!-- Sign In -->
  241.     <div class="container__form container--signin">
  242.       <form action="#" class="form" id="form2">
  243.         <h2 class="form__title">Sign In</h2>
  244.         <input type="email" placeholder="Email" class="input" />
  245.         <input type="password" placeholder="Password" class="input" />
  246.         <a href="#" class="link">Forgot your password?</a>
  247.         <button class="btn">Sign In</button>
  248.       </form>
  249.     </div>

  251.     <!-- Overlay -->
  252.     <div class="container__overlay">
  253.       <div class="overlay">
  254.         <div class="overlay__panel overlay--left">
  255.           <button class="btn" id="signIn">Sign In</button>
  256.         </div>
  257.         <div class="overlay__panel overlay--right">
  258.           <button class="btn" id="signUp">Sign Up</button>
  259.         </div>
  260.       </div>
  261.     </div>
  262.   </div>

  264.   <script>
  265.     const signInBtn = document.getElementById("signIn");
  266.     const signUpBtn = document.getElementById("signUp");
  267.     const fistForm = document.getElementById("form1");
  268.     const secondForm = document.getElementById("form2");
  269.     const container = document.querySelector(".container");

  271.     signInBtn.addEventListener("click", () => {
  272.       container.classList.remove("right-panel-active");
  273.     });

  275.     signUpBtn.addEventListener("click", () => {
  276.       container.classList.add("right-panel-active");
  277.     });

  279.     fistForm.addEventListener("submit", (e) => e.preventDefault());
  280.     secondForm.addEventListener("submit", (e) => e.preventDefault());

  282.   </script>
  283. </body>

  285. </html>
复制代码

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

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-12-12 07:32 , Processed in 0.648703 second(s), 24 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问：IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明