• 【HTML+CSS+JS】模仿QQ登录界面

    目录

    前言

    学了HTML、CSS和JS有了一个月了，JS还未学完，偷懒写一个小项目，用了一个下午，顺便巩固一下所学知识。（内容比较简陋，适合新手）

    源代码：https://github.com/yeziyuhai/QQ-login-interface

    简介

    左边是我的，右边是官方的。没有设计稿和素材，只能自己找，所以是无法做到一模一样的，不够这样子也差不多了。
    在这里插入图片描述

    布局思路

    很明显，简陋的做法是上下两个盒子，中间头像可以定位上面的父级也可以定位下面的父级，这里我选择的是上面，中间内容用一个表单包裹。注册账号和二维码使用定位，父级是大盒子。
    .html

        
    <div>
        <div class="login">
            
            <div class="top">
                <div class="left">
                    <span class="iconfont icon-QQ">span>QQ
                div>
                <div class="right">
                    <span class="iconfont icon-shezhi">span>
                    <span class="iconfont icon-jianhao">span>
                    <span class="iconfont icon-chenghao">span>
                div>
                <div class="head">
                    <div class="green">div>
                div>
            div>
            
            <div class="bottom">
                
                <form action="javascript:;">
                    <div class="input">
                        <div class="text">
                            <label for=""><span class="iconfont icon-QQ">span>label>
                            <label for=""><span class="iconfont icon-xiala">span>label>
                            <input type="text" placeholder="QQ号码/手机/邮箱" name="uname">
                        div>
                        <div class="password">
                            <label for=""><span class="iconfont icon-suoding_huaban">span>label>
                            <label for=""><span class="iconfont icon-jianpan_o">span>label>
                            <input type="password" placeholder="密码">                               
                        div>
                    div>
                    
                    <div class="check">
                        
                        <label><input type="checkbox" >自动登录label> 
                        <label><input type="checkbox">记住密码label> 
                        <a href="https://accounts.qq.com/find?aquin" target="_blank">找回密码a>
                    div>
                    
                    <input type="submit" value="登录" class="loginBtn">
                form>
                
                <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=client®key=1720F6EE975B2AFF081EC88BCAE91F145C04012178E039924F1CC17DB69AC184&ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.5929_NewAccount_Btn.0&ADPUBNO=27255" class="signup" target="_blank">注册账号a>
                <span class="iconfont icon-ico">span>
                
                div>
                <div class="mobile">
                    <img src="./images/erweima.png" alt="">
                    <p>用QQ手机版扫描二维码安全登录p> 
                    <button class="back">返回button>
                div>
                
                <div class="setup">
                    <p>懒得弄了p> 
                    <button class="back">返回button>
                div>
        div>
    div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    相关代码

    颜色渐变动画

    思路是渐变45度角倾斜，之后动画改变定位，当然和官方的不一样，做出差不多效果就行。
    .css

    .login .top {
  position: relative;
  width: 100%;
  height: 40%;
  background: linear-gradient(-45deg, #23A6D5, rgba(106, 103, 255), rgba(158, 81, 255), #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: bg 4s infinite linear forwards;
  color: #fff;
}

@keyframes bg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    头像

    头像绝对定位，顶部相对定位，小绿点绝对定位。

    .login .top .head {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0px 5px 10px 0px rgba(118, 118, 118, 0.4);
  background-image: url(/images/head.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(234, 28, 39);
}
.login .top .head .green {
  position: absolute;
  right: -10px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0px 5px 10px 0px rgba(118, 118, 118, 0.4);
  background-color: rgba(9, 241, 117);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    表单区域

    直接搬.less过来，清除一些。这里面挺多细节的，先说好字体大小浏览器最小只能是12px，除非你把自己浏览器最小字号调到10px，视觉上好看一些，不然下面复选框的字会换行。

    添加了textChange类，因为需要点击输入框之后样式的改变。

    这里耗费我比较多的时间，挺多细节，毕竟我这个人追求完美。
    .less

    form {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            
            text-align: center;
            margin-top: 8px;
            .input {
                .text {
                    position: relative;
                    width: 100%;
                    border-bottom: 1px solid #ccc;
                    margin-bottom: 5px;

                    .icon-QQ {
                        position: absolute;
                        left: 0;
                        top: 0;
                        color: rgba(184, 186, 188);
                    }

                    .icon-xiala {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }

                .password {
                    position: relative;
                    width: 100%;
                    border-bottom: 1px solid #ccc;

                    .icon-suoding_huaban {
                        position: absolute;
                        left: 2px;
                        top: 4px;
                        font-size: 12px;
                        color: rgba(184, 186, 188);
                    }

                    .icon-jianpan_o {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }

                // 要放在后面，不然层叠
                .textChange {
                    border-bottom: 1px solid rgba(28, 196, 252);
                    .icon-QQ {
                        color: rgba(28, 196, 252);
                    }
                }
                .passWordChange {
                    border-bottom: 1px solid rgba(28, 196, 252);
                    .icon-suoding_huaban {
                        color: rgba(28, 196, 252);
                    }
                }

                input {
                    width: 80%;
                    height: 20px;
                    /* 去掉默认边框样式 */
                    border: 0;
                    outline: none; 
                }
            }

            .check {
                display: flex;
                justify-content: space-between;
                width: 100%;
                margin: 5px 0;
                font-size: 10px;
                color: rgba(166, 166, 166);

                // 多选框大小
                input {
                    // ohhhhhhhhhhh
                    float: left;
                    transform: scale(.8);
                }

                label {
                    position: relative;
                    margin-right: 12px;
                }

                a {
                    color: rgba(166, 166, 166);
                }

                a:hover {
                    color: rgba(166, 190, 177);
                }
            }

            // 点击登录
            .loginBtn {
                width: 100%;
                height: 28px;
                border-radius: 3px;
                background-color: rgba(28, 196, 252);
                color: #fff;
                font-size: 12px;
            }

            .loginBtn:active {
                background-color: rgba(34, 174, 250);
            }
        }

        .signup {
            position: absolute;
            left: 0;
            bottom: 0;
            margin: 5px;
            font-size: 10px;
            color: rgba(166, 166, 166);
        }
        .signup:hover {
            color: rgba(166, 190, 177)
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127

    JS相关

    拖拽界面、界面关闭、输入框显示、点击二维码使用手机登录
    在这里插入图片描述

    在这里插入图片描述
    .js

    // window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
window.addEventListener('load', function() {
    // 1.登录界面
    // 关闭
    var jianhao = this.document.querySelector('.icon-jianhao');
    var chenghao = this.document.querySelector('.icon-chenghao');
    var login = this.document.querySelector('.login');
    jianhao.addEventListener('click', function() {
        login.style.display = 'none';
    })
    chenghao.addEventListener('click', function() {
        login.style.display = 'none';
    })

    // 输入框
    var text = this.document.querySelector('.text');
    var password = this.document.querySelector('.password');
    var textInput = text.querySelector('input');
    var passwordInput = password.querySelector('input');
    
    textInput.addEventListener('focus', function() {
        this.placeholder = '';
        text.className = 'text textChange';
    })
    textInput.addEventListener('blur', function() {
        this.placeholder = 'QQ号码/手机/邮箱';
        text.className = 'text';
    }) 
    passwordInput.addEventListener('focus', function() {
        this.placeholder = '';
        password.className = 'password passWordChange';
    })
    passwordInput.addEventListener('blur', function() {
        this.placeholder = '密码';
        password.className = 'password';
    }) 

    // 拖拽界面
    // 新的坐标 = 鼠标离盒子内距离 - 鼠标距离在网页距离
    var top = this.document.querySelector('.top');
    top.addEventListener('mousedown', function(e) {
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        document.addEventListener('mousemove', move);
        function move(e) {
            login.style.left = e.pageX - x + 'px';
            login.style.top = e.pageY - y + 'px';
        }
        document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move);
        })
    })

    // 手机登录
    var ico = this.document.querySelector('.icon-ico');
    var mobile = this.document.querySelector('.mobile');
    var bottom = this.document.querySelector('.bottom');
    var head = this.document.querySelector('.head');
    var back = this.document.querySelector('.back');
    ico.addEventListener('click', function() {
        mobile.style.display = 'block';
        bottom.style.display = 'none';
        head.style.display = 'none';
    })
    back.addEventListener('click', function() {
        bottom.style.display = 'block';
        head.style.display = 'block';
        mobile.style.display = 'none';
    })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70

    总结

    多动手技术才会提升，写代码才会熟练，之后也会更新这一系列文章。

  • 相关阅读:
    Three.js相机简明教程
    小型k8s
    剑指 Offer II 024. 反转链表
    实拆一个风扇
    常用scss函数基本使用及操作（mixin）
    Ktor vs Spring Boot：哪个框架能帮助你构建更高性能的 Web 应用？
    从编写操作系统的角度看上下文切换
    蓝桥等考Python组别八级005
    从外卖小哥自学到阿里首席架构师，全靠这份“从零学架构宝典”真的太强了
    shiro框架04会话管理+缓存管理+Ehcache使用
  • 原文地址：https://blog.csdn.net/btufdycxyffd/article/details/127507693