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

这篇具有很好参考价值的文章主要介绍了【HTML+CSS+JS】模仿QQ登录界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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

简介

左边是我的,右边是官方的。没有设计稿和素材,只能自己找,所以是无法做到一模一样的,不够这样子也差不多了。
【HTML+CSS+JS】模仿QQ登录界面

布局思路

很明显,简陋的做法是上下两个盒子,中间头像可以定位上面的父级也可以定位下面的父级,这里我选择的是上面,中间内容用一个表单包裹。注册账号和二维码使用定位,父级是大盒子。
.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&regkey=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>

相关代码

颜色渐变动画

思路是渐变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%;
  }
}

头像

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

.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);
}

表单区域

直接搬.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)
        }

JS相关

拖拽界面、界面关闭、输入框显示、点击二维码使用手机登录
【HTML+CSS+JS】模仿QQ登录界面

【HTML+CSS+JS】模仿QQ登录界面
.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';
    })
})

总结

多动手技术才会提升,写代码才会熟练,之后也会更新这一系列文章。文章来源地址https://www.toymoban.com/news/detail-461245.html

到了这里,关于【HTML+CSS+JS】模仿QQ登录界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html+css实现的登录界面

    留言 :如果对你有帮助,给博主点个免费的赞吧 ~ 创作不易,感谢支持!

    2023年04月14日
    浏览(6)
  • HTML+CSS前端 简易用户登录界面

    Day1 刚学了一些html和css的简单语法,尝试写一个非常简易的静态用户登录界面。   login_simple.html login_simple.css 这里需要把 background.jpg 替换成自己的背景图。 效果展示 最后的效果就是这样的啦

    2024年02月14日
    浏览(15)
  • 前端登录界面网站设计模板--HTML+CSS

    💖效果展示 💖HTML代码展示

    2024年02月04日
    浏览(12)
  • HTML+CSS 改进前端简易响应式登录界面

    day5 改进上次的项目 HTML+CSS前端 动态响应用户登录界面_一只名叫Me的猫的博客-CSDN博客 在vscode中,空白html文件打入一个感叹号,可以自动创建html模板,避免手搓(悲)。  上次就是因为手搓导致漏了utf-8编码。模板是这个样子的。 块级元素在页面上以块的形式显示,自动占

    2024年02月14日
    浏览(6)
  • HTML和CSS配合制作一个简单的登录界面

    这是一个CSS样式表,用于为网页中的HTML元素设置样式。接下来我会逐句解释每个选择器和样式的作用。 *{ box-sizing: border-box; } :这行代码将所有HTML元素的盒模型设置为 border-box ,使元素的宽高包括内容、内边距和边框,而不仅仅是内容。 body{ font-family: Arial, Helvetica, sans-ser

    2024年02月12日
    浏览(15)
  • 在登录界面中设置登录框、多选项和按钮(HTML和CSS)

      登录框(Input框)的样式: 这样设置后,登录框的宽度为200px,高度为30px,具有1px宽的边框,边框颜色为#ccc,圆角为5px,内边距为5px,下方留有10px的外边距。  多选项的样式(如复选框和单选框): 这样设置后,复选框和单选框之间会有5px的外边距,同时复选框和单选框

    2024年02月14日
    浏览(9)
  • HTML+CSS+JS:花瓣登录组件

    实现了一个具有动态花朵背景和简洁登录框的登录页面效果。 页面整体样式设置,包括重置默认样式、设置字体、设置section样式等。 登录框的样式设置,包括背景、边框、阴影、输入框样式等。 登录框中包含一个标题(h2元素)、输入框(input元素)、登录按钮(button元素

    2024年02月22日
    浏览(10)
  • HTML+JS+CSS移动端购物车选购界面

    UIGoods 类: 构造函数: 创建 UIGoods 实例时,传入商品数据 g ,初始化商品的数据和选择数量。 getTotalPrice() 方法: 计算商品的总价,考虑了选择数量。 isChoose() 方法: 判断是否选中该商品。 increase() 方法: 增加商品的选择数量。 decrease() 方法: 减少商品的选择数量,但数量

    2024年02月02日
    浏览(14)
  • 【HTML+CSS+JS】简单的登录注册验证

    本文是基于https://blog.csdn.net/NpcCat/article/details/106434653?spm=1001.2014.3001.5501的基础上的优化 有私信希望我做登录的用户名密码验证和登录后的页面跳转,这里用JS简单实现一下 还有很多额外的可以做的优化如输入信息格式的验证、查询用户名是否重复等都可以在取到用户输入的信

    2024年02月11日
    浏览(13)
  • 【HTML+CSS+JS】登录注册页面大合集

    学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便 萌生了用人脸来进行注册和登录的想法 ,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进行登录注册 饭要一口一口吃,路要一步一步走,于是便在开

    2024年02月09日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包