冰凌汇编

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 104|回复: 0
收起左侧

[其它] 300行代码实现 可切换登录zc页面 美观

[复制链接]
Tencent 发表于 2022-3-27 22:50:41
一个html写的登录和注册界面,大家可以学习参考哦。欢迎在下方评论
300行代码实现 可切换登录zc页面 美观 - Tencent_冰凌汇编

300行代码实现 可切换登录zc页面 美观 - Tencent_冰凌汇编

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <style type="text/css">
   *, *:before, *:after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   body {
       font-family: 'Open Sans', Helvetica, Arial, sans-serif;
       background: #ededed;
   }

   input, button {
       border: none;
       outline: none;
       background: none;
       font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   }

   .tip {
       font-size: 20px;
       margin: 40px auto 50px;
       text-align: center;
   }

   .content {
       overflow: hidden;
       position: absolute;
       left: 50%;
       top: 50%;
       width: 900px;
       height: 550px;
       margin: -300px 0 0 -450px;
       background: #fff;
   }

   .form {
       position: relative;
       width: 640px;
       height: 100%;
       transition: -webkit-transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
       padding: 50px 30px 0;
   }

   .sub-cont {
       overflow: hidden;
       position: absolute;
       left: 640px;
       top: 0;
       width: 900px;
       height: 100%;
       padding-left: 260px;
       background: #fff;
       transition: -webkit-transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
   }

   .content.s--signup .sub-cont {
       -webkit-transform: translate3d(-640px, 0, 0);
       transform: translate3d(-640px, 0, 0);
   }

   button {
       display: block;
       margin: 0 auto;
       width: 260px;
       height: 36px;
       border-radius: 30px;
       color: #fff;
       font-size: 15px;
       cursor: pointer;
   }

   .img {
       overflow: hidden;
       z-index: 2;
       position: absolute;
       left: 0;
       top: 0;
       width: 260px;
       height: 100%;
       padding-top: 360px;
   }

   .img:before {
       content: '';
       position: absolute;
       right: 0;
       top: 0;
       width: 900px;
       height: 100%;
       background-image: url(../images/bg.jpg);
       background-size: cover;
       transition: -webkit-transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
   }

   .img:after {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.6);
   }

   .content.s--signup .img:before {
       -webkit-transform: translate3d(640px, 0, 0);
       transform: translate3d(640px, 0, 0);
   }

   .img__text {
       z-index: 2;
       position: absolute;
       left: 0;
       top: 50px;
       width: 100%;
       padding: 0 20px;
       text-align: center;
       color: #fff;
       transition: -webkit-transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out;
       transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
   }

   .img__text h2 {
       margin-bottom: 10px;
       font-weight: normal;
   }

   .img__text p {
       font-size: 14px;
       line-height: 1.5;
   }

   .content.s--signup .img__text.m--up {
       -webkit-transform: translateX(520px);
       transform: translateX(520px);
   }
   .img__text.m--in {
       -webkit-transform: translateX(-520px);
       transform: translateX(-520px);
   }

   .content.s--signup .img__text.m--in {
       -webkit-transform: translateX(0);
       transform: translateX(0);
   }

   .img__btn {
       overflow: hidden;
       z-index: 2;
       position: relative;
       width: 100px;
       height: 36px;
       margin: 0 auto;
       background: transparent;
       color: #fff;
       text-transform: uppercase;
       font-size: 15px;
       cursor: pointer;
   }
   .img__btn:after {
       content: '';
       z-index: 2;
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       border: 2px solid #fff;
       border-radius: 30px;
   }

   .img__btn span {
       position: absolute;
       left: 0;
       top: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       transition: -webkit-transform 0.6s;
       transition: transform 0.6s;
       transition: transform 0.6s, -webkit-transform 0.6s;
   }

   .img__btn span.m--in {
       -webkit-transform: translateY(-72px);
       transform: translateY(-72px);
   }

   .content.s--signup .img__btn span.m--in {
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }

   .content.s--signup .img__btn span.m--up {
       -webkit-transform: translateY(72px);
       transform: translateY(72px);
   }

   h2 {
       width: 100%;
       font-size: 26px;
       text-align: center;
   }

   label {
       display: block;
       width: 260px;
       margin: 25px auto 0;
       text-align: center;
   }

   label span {
       font-size: 12px;
       color: #909399;
       text-transform: uppercase;
   }

   input {
       display: block;
       width: 100%;
       margin-top: 5px;
       padding-bottom: 5px;
       font-size: 16px;
       border-bottom: 1px solid rgba(0, 0, 0, 0.4);
       text-align: center;
   }

   .forgot-pass {
       margin-top: 15px;
       text-align: center;
       font-size: 12px;
       color: #cfcfcf;
   }

   .forgot-pass a {
       color: #cfcfcf;
   }

   .submit {
       margin-top: 40px;
       margin-bottom: 20px;
       background: #d4af7a;
       text-transform: uppercase;
   }

   .fb-btn {
       border: 2px solid #d3dae9;
       color: #8fa1c7;
   }
   .fb-btn span {
       font-weight: bold;
       color: #455a81;
   }

   .sign-in {
       transition-timing-function: ease-out;
   }
   .content.s--signup .sign-in {
       transition-timing-function: ease-in-out;
       transition-duration: 0.6s;
       -webkit-transform: translate3d(640px, 0, 0);
       transform: translate3d(640px, 0, 0);
   }

   .sign-up {
       -webkit-transform: translate3d(-900px, 0, 0);
       transform: translate3d(-900px, 0, 0);
   }
   .content.s--signup .sign-up {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
   }
  </style>
      <div class="content">
          <div class="form sign-in">
     <form class="layui-form" action="">
              <h2>欢迎回来</h2>
              <label>
                  <span>用户名</span>
                  <input type="email" name="username"/>
              </label>
              <label>
                  <span>密码</span>
                  <input type="password" name="password"/>
              </label>
              <p class="forgot-pass"><a href="javascript:">忘记密码?</a></p>
              <button type="button" class="submit" lay-submit="" lay-filter="login">登 录</button>
     </frome>
              <!-- <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button> -->
          </div>
          <div class="sub-cont">
              <div class="img">
                  <div class="img__text m--up">
                      <h2>还未注册?</h2>
                      <p>立即注册,发现大量机会!</p>
                  </div>
                  <div class="img__text m--in">
                      <h2>已有帐号?</h2>
                      <p>有帐号就登录吧,好久不见了!</p>
                  </div>
                  <div class="img__btn">
                      <span class="m--up">注 册</span>
                      <span class="m--in">登 录</span>
                  </div>
              </div>
              <div class="form sign-up">
                  <h2>立即注册</h2>
      <form class="layui-form" action="" >
       <label>
           <span>用户名</span>
           <input type="text" name="username"/>
       </label>
       <label>
           <span>邮箱</span>
           <input type="email" name="email"/>
       </label>
       <label>
           <span>密码</span>
           <input type="password" name="password"/>
       </label>
       <button type="button" class="submit"  lay-submit="" lay-filter="regist">注 册</button>
      </form>

                 <!-- <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号注册</button> -->
              </div>
          </div>
      </div>



   <div style="text-align:center;">

  </div>

  <script type="text/javascript">
   document.querySelector('.img__btn').addEventListener('click', function() {
       document.querySelector('.content').classList.toggle('s--signup')
   })



  </script>

 </body>
</html>

冰凌汇编免责声明
以上内容均来自网友转发或原创,如存在侵权请发送到站方邮件9003554@qq.com处理。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|站点统计|Archiver|小黑屋|RSS|冰凌汇编 ( 滇ICP备2022002049号 滇公网安备 53032102000029号)|网站地图

GMT+8, 2022-9-25 06:02 , Processed in 0.139509 second(s), 15 queries , Redis On.

冰凌汇编 - 建立于2021年12月20日

Powered by Discuz! © 2001-2022 Comsenz Inc.

快速回复 返回顶部 返回列表