具有翻转效果的登录和注册页面（代码实现）

最新推荐文章于 2022-11-14 20:37:24 发布

肆玖戚

最新推荐文章于 2022-11-14 20:37:24 发布

阅读量2.1k

点赞数 4

本文链接：https://blog.csdn.net/weixin_39343602/article/details/106201748

版权

HTML代码：

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://at.alicdn.com/t/font_1156682_y7tsfj12kx.css">
        <link rel="stylesheet" href="./css/login-style.css">
        <title>登入|注册</title>
    </head>
    <header>
        <a href="#" class="iconfont icon-login1"></a>
    </header>
    <main>
        <div class="content">
            <!-- 登录 -->
            <div class="demo demo-login">
                <a href="#" class="iconfont icon-guanbi close"></a>
                <ul class="clearfix">
                    <li><a href="#" class="login active">登录</a></l>
                    <li><a href="#" class="register active">注册</a></li>
                </ul>
                <div class="info"></div>
                <form action="/login" method="post">
                    <div class="username">
                        <span class="iconfont icon-login2"></span>
                        <input class= "text" type="text" name="username"   placeholder="用户名">
                    </div>
                    <div class="password">
                        <span class="iconfont icon-mima"></span>
                        <input class= "text" type="password" name="password"  placeholder="密码">
                    </div>
                    
                    <div class="input-field">
                        <input type="submit" value="登录">
                    </div> 
                </form>
            </div>
            <!-- 注册 -->
            <div class="demo demo-register" >
                <a href="#" class="iconfont icon-guanbi close"></a>
                <ul class="clearfix">
                    <li><a href="#" class="login active">登录</a></l>
                    <li><a href="#" class="register active">注册</a></li>
                </ul>
                <div class="info"></div>
                <form action="/register" method="post">
                    <div class="username">
                        <span class="iconfont icon-login2"></span>
                        <input class= "text" type="text" name="username"   placeholder="输入用户名">
                    </div>
                    <div class="password">
                        <span class="iconfont icon-mima"></span>
                        <input class= "text" type="password" name="password"  placeholder="输入密码">
                    </div>
                    <div class="password">
                        <span class="iconfont icon-mima"></span>
                        <input class= "text" type="password" name="password"  placeholder="再次输入密码">
                    </div>
                    <div class="input-field">
                        <input type="submit" value="注册">
                    </div>
                </form>
            </div>
        </div>
    </main>

css代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,html{
    height: 100%;
}
body {
    font: 18px/1.5em Arial;
    color: #000;
    background: url("http://pic1.win4000.com/wallpaper/0/544b36fae2969.jpg") center center no-repeat;
    background-size: cover;
}
a {
    color: #000;
    /* 取消a标签的下划线 */
    text-decoration: none;
}
ul {
    /* 取消列表的点 */
    list-style: none;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
/* header */
header {
    height: 50px;
    position: relative;
} 
header a {
    color: #000;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    right: 20px;
}
/* .demo */
.content{
    display: none; 
}
.demo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 3px 4px 5px rgba(0,0,0,0.2);
    
}
.demo .demo-login,.demo-register{
    border: 1px solid #fff;
}
.demo .close {
    position: absolute;
    top: 9px;
    right: -13px;
}
.demo ul {
    margin: 18px 148px;
}
.demo ul li {
    float: left;
    margin:5px 10px 5px 30px;
    text-align: center;
}
.demo li a {
    font-size: 20px;
    color: #666;
}
.demo li a.active{
    border-bottom: 3px solid #444;
}
.demo .info {
    color: #ff0037;
    font-size: 12px;
    margin: 0 62px;
  }
.demo .username,.password {
    border: 1px solid #ccc;
    margin: 25px auto;
    width:370px;
}
.demo span {
    display: inline-block;
    margin:10px 8px;
}
.demo .text {
    /* 取消input的最外层框 */
    border: none;
    height:46px;
    width:330px;
}
.demo input {
    /* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 */
    outline: medium;
    padding: 5px 12px;
}
.demo .input-field {
    display: inline-block;
    background: #fff;
    margin: 0 0 20px 60px;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.4);
}
.login .demo-login,.demo-register {
    /* translate按哪个轴进行移动 水平方向：正右负左 垂直：负上正下 元素中心和父元素中心保持对齐 水平垂直居中 */
    transform: translate(-50%,-50%) rotateY(180deg);
    backface-visibility: hidden;
    transition: all 1s;
  }
 
.login .demo-register,.demo-login {
    transform: translate(-50%,-50%) rotateY(0deg);
    backface-visibility: hidden;
    transition: all 1s;
}

js代码：

    function $(selector) {
      return document.querySelector(selector);
    }
    $('header a').addEventListener('click',function(e){
      e.stopPropagation();
      $('.content').style.display = 'block';
      $('.content li .register').classList.remove('active');
    })

    $('.content').addEventListener('click',function(e){
      e.stopPropagation();
      if(e.target.classList.contains('login')){
        $('.content li .register').classList.remove('active');
        $('main').classList.remove('login');
      }
      if(e.target.classList.contains('register')){
        $('.content .demo-register li .login').classList.remove('active');
        $('main').classList.add('login');
      }
      if(e.target.classList.contains('close')){
        $('.content').style.display = 'none';
      }
    })
    
    document.addEventListener('click',function(e){
      e.stopPropagation();
      $('.content').style.display = 'none';
    })

效果图：

肆玖戚

关注

4
点赞
踩
32

收藏

觉得还不错? 一键收藏
2
评论
具有翻转效果的登录和注册页面（代码实现）

HTML代码： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href.
复制链接

扫一扫