巨好看的登录注册界面源码

news2024/11/6 21:24:00

展示效果
在这里插入图片描述
在这里插入图片描述
源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100vh;
            background-color: #f0f8ff;
            /* 淡蓝色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-container {
            width: 900px;
            height: 550px;
            background: #ffffff;
            border-radius: 4px;
            position: relative;
        }

        .form-panel {
            position: absolute;
            left: 0;
            transition: 0.5s all ease-in-out;
        }

        .form-panel .login-form,
        .registration-form {
            width: 640px;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            padding: 50px 30px;
        }

        .form-panel h1 {
            margin-bottom: 35px;
        }

        .form-panel .form-section {
            width: 100%;
            margin-bottom: 30px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 6px;
        }

        .form-panel .form-section label {
            font-size: 14px;
            color: #909399;
            text-transform: uppercase;
            /* margin-bottom: 8px; */
        }

        .form-panel .form-section input {
            width: 50%;
            outline: 0;
            border: none;
            font-size: 18px;
            color: #008080;
            /* 马卡龙淡绿色 */
            text-align: center;
            padding: 4px 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        }

        .form-panel .form-section span {
            color: #5f9ea0;
            /* 马卡龙淡绿色 */
            font-size: 15px;
            cursor: pointer;
            margin-top: 18px;
        }

        .form-panel button {
            width: 50%;
            padding: 6px 0;
            text-align: center;
            border: 3px solid #87cefa;
            /* 淡蓝色 */
            border-radius: 20px;
            background: #87cefa;
            /* 淡蓝色 */
            color: #fff;
            font-size: 17px;
            letter-spacing: 6px;
            text-indent: 6px;
            margin-bottom: 15px;
            cursor: pointer;
        }

        .form-panel .alternative-login {
            border: 3px solid #add8e6;
            /* 浅淡蓝色 */
            background: #ffffff;
            color: #add8e6;
            /* 浅淡蓝色 */
            font-weight: 600;
        }

        .registration-panel {
            width: 260px;
            height: 100%;
            background: linear-gradient(to bottom right, #add8e6 0%, #87cefa 50%, #00bfff 100%);
            /* 淡蓝色渐变 */
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            position: absolute;
            left: 640px;
            top: 0;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            padding: 50px 0;
            color: white;
            transition: all 1s ease-in-out;
        }

        .registration-panel .panel-title {
            margin-bottom: 10px;
            transition: all 0.3s ease-in-out;
        }

        .registration-panel button {
            margin-top: 260px;
            width: 50%;
            padding: 8px 0;
            border-radius: 14px;
            letter-spacing: 10px;
            text-indent: 10px;
            font-size: 18px;
            color: #fff;
            border: 3px solid #fff;
            background: transparent;
            font-weight: 700;
            cursor: pointer;
        }

        .registration-panel button:hover {
            border: 3px solid #00bfff;
            /* 马卡龙淡蓝色 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-container">
            <div class="form-panel">
                <div class="login-form">
                    <h1>欢迎回来</h1>
                    <section class="form-section">
                        <label for="email">邮箱</label>
                        <input type="text" id="email" />
                    </section>
                    <section class="form-section">
                        <label for="password">密码</label>
                        <input type="password" id="password" />
                    </section>
                    <span style="margin-bottom: 8px;">忘记密码?</span>

                    <button type="button">登录</button>
                    <button type="button" class="alternative-login"> 使用<span
                            style="font-weight: 900; color: #455a81">二维码</span>登录 </button>
                </div>
                <div class="registration-form" style="display: none">
                    <h1>立即注册</h1>
                    <section class="form-section">
                        <label for="username">用户名</label>
                        <input type="text" id="username" />
                    </section>
                    <section class="form-section">
                        <label for="email">邮箱</label>
                        <input type="text" id="email" />
                    </section>
                    <section class="form-section">
                        <label for="password">密码</label>
                        <input type="password" id="password" />
                    </section>
                    <button type="button">注册</button>
                    <button type="button" class="alternative-login"> 使用<span
                            style="font-weight: 900; color: #455a81">二维码</span>扫码注册 </button>
                </div>
            </div>
            <div class="registration-panel">
                <h1 class="panel-title">还未注册?</h1>
                <span class="subTitle">立即注册,发现大量机会!</span>
                <button type="button" id="toggleForm">注册</button>
            </div>
        </div>
    </div>
    <script>
        const toggleButton = document.getElementById('toggleForm');
        const loginForm = document.querySelector('.login-form');
        const registrationForm = document.querySelector('.registration-form');
        const formPanel = document.querySelector('.form-panel');
        const registrationPanel = document.querySelector('.registration-panel');
        const panelTitle = document.querySelector('.panel-title');
        const subTitle = document.querySelector('.subTitle');
        let isRegistrationMode = false;

        function toggleLoginAndRegistration() {
            if (isRegistrationMode) {
                registrationPanel.style.left = '640px';
                formPanel.style.left = '0';
                toggleButton.innerText = '注册';
                panelTitle.innerText = '还未注册?';
                subTitle.innerText = '立即注册,发现大量机会!';
                setTimeout(() => {
                    loginForm.style.display = 'flex';
                    registrationForm.style.display = 'none';
                }, 300);
            } else {
                registrationPanel.style.left = '0';
                formPanel.style.left = '260px';
                toggleButton.innerText = '登录';
                panelTitle.innerText = '已有帐号?';
                subTitle.innerText = '有帐号就登录吧,好久不见了!';
                setTimeout(() => {
                    loginForm.style.display = 'none';
                    registrationForm.style.display = 'flex';
                }, 300);
            }
            isRegistrationMode = !isRegistrationMode;
        }

        toggleButton.addEventListener('click', toggleLoginAndRegistration);
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229810.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

记一次:使用使用Dbeaver连接Clickhouse

前言&#xff1a;使用了navicat连接了clickhouse我感觉不太好用&#xff0c;就整理了一下dbeaver连接 0、使用Navicat连接clickhouse 测试连接 但是不能双击打开&#xff0c;可是使用命令页界面&#xff0c;右键命令页界面&#xff0c;然后可以用sql去测试 但是不太好用&#…

ts:使用fs内置模块简单读写文件

ts&#xff1a;使用fs内置模块简单读写文件 一、主要内容说明二、例子&#xff08;一&#xff09;、fs模块的文件读写1.源码1 &#xff08;fs模块的文件读写&#xff09;2.源码1运行效果 三、结语四、定位日期 一、主要内容说明 在ts中&#xff0c;我们可以使用内置的fs模块来…

RFID技术让档案管理更高效、更可靠

RFID档案应用&#xff0c;即利用射频识别技术对档案进行管理&#xff0c;其价值主要体现在以下几个方面&#xff1a; PART01效率提升 RFID技术通过无线射频识别&#xff0c;能够快速、准确地识别档案信息&#xff0c;大大提高了档案管理的效率。在传统的档案管理中&#xff0c;…

《数字图像处理基础》学习04-图像的量化

在上一篇文章中&#xff0c;已经实现了对图像的采样。 《数字图像处理基础》学习03-图像的采样-CSDN博客 接着就需要对图像进行量化操作。 目录 一&#xff0c;量化的相关概念 二&#xff0c;matlab编写程序生成量化图像 1&#xff0c;要求 2&#xff0c;思路及注意点…

逻辑代数的基本公式

根据图中的逻辑运算符号&#xff0c;包括与非逻辑&#xff08;NAND&#xff09;、或非逻辑&#xff08;NOR&#xff09;、与或非逻辑、异或逻辑&#xff08;XOR&#xff09;和同或逻辑&#xff08;XNOR&#xff09;&#xff0c;我们可以分别给出每个运算符的真值表。 1. 与非逻…

iptables面试题

1、详述iptales工作流程以及规则过滤顺序&#xff1f; iptables过滤的规则顺序是由上至下&#xff0c;若出现相同的匹配规则则遵循由上至下的顺序 2、iptables的几个表以及每个表对应链的作用&#xff1f; Iptables有四表五链 Filter表 : Filter表是iptables中使用的默认表…

Java Collection/Executor DelayedWorkQueue 总结

前言 相关系列 《Java & Collection & 目录》《Java & Executor & 目录》《Java & Collection/Executor & DelayedWorkQueue & 源码》《Java & Collection/Executor & DelayedWorkQueue & 总结》《Java & Collection/Executor &a…

[Python学习日记-59] 开发基础练习2——网站访问日志分析

[Python学习日记-59] 开发基础练习2——网站访问日志分析 简介 题目 答案 简介 该练习结合了函数和一些常用的模块开发了一个对网站访问日志分析的程序&#xff0c;可以巩固实践之前学习的内容。 题目 基本需求&#xff1a; 统计本日志文件的总 pv、uv 数列出全天每小时的…

tiktok批量添加达人怎么弄

在 TikTok 上批量添加达人可以借助一些工具或方法&#xff0c;以下是一些常见的途径&#xff1a; 点我达秘免费体验地址注册 使用达人邀约工具&#xff1a; 功能特点&#xff1a;这类工具专为 TikTok 跨境小店和本土小店提供服务&#xff0c;可以实现多国家、多店铺同时私信和…

深度学习-激活函数详解

激活函数在神经网络中的作用是引入非线性特征&#xff0c;使得网络可以拟合和表达更复杂的数据关系。它通过对输入进行非线性变换&#xff0c;让每一层的输出既能反映输入特征&#xff0c;又能传递重要信息&#xff0c;以进行梯度更新。以下是关于常用激活函数的详细讲解。 1.…

基于vue框架的的乐守护儿童成长记录系统b65tg(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,成长指标,疫苗接种,学业档案,课外活动,旅游经历,交流论坛 开题报告内容 基于Vue框架的乐守护儿童成长记录系统开题报告 一、研究背景与意义 随着科技的飞速发展和家庭对子女成长关注度的不断提升&#xff0c;如何科学、系统地记…

使用wordcloud与jieba库制作词云图

目录 一、WordCloud库 例子&#xff1a; 结果&#xff1a; 二、Jieba库 两个基本方法 jieba.cut() jieba.cut_for_serch() 关键字提取&#xff1a; jieba.analyse包 extract_tags() 一、WordCloud库 词云图&#xff0c;以视觉效果提现关键词&#xff0c;可以过滤文本…

安卓13 连接usb设备后不更新ui

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码更改4.彩蛋1.前言 有些界面在链接usb设备后,ui会被刷新,导致闪烁问题。 2.问题分析 像这种问题一般是usb事件,导致的ui事件更新了,处理方法是禁止该事件 3.代码更改 这块我们就需要在输入事件管理里面…

根号下-1等于多少

根号下的负数在实数范围内是没有定义的&#xff0c;但在复数范围内&#xff0c;我们可以用虚数单位 来表示。具体来说&#xff1a; 因此&#xff0c;根号下的负一等于虚数单位 。

什么是人工智能(AI)?

人工智能AI&#xff08;即Artificial Intelligence&#xff09;是计算机科学的一个分支&#xff0c;旨在让计算机模仿人类的决策能力、像人类一样思考和行动&#xff0c;来解决如自然语言处理、推荐、智能数据检索、预测等方面人类无法处理或难以处理的复杂工作。 为什么需要人…

国标GB28181公网直播EasyGBS国标GB28181软件的应用场景

随着科技的飞速发展&#xff0c;安防视频监控技术已经成为现代社会不可或缺的一部分&#xff0c;它在保障公共安全、企业运营安全以及个人财产安全方面发挥着举足轻重的作用。国标GB28181网页直播平台EasyGBS安防视频监控平台&#xff0c;作为集高效性、稳定性与智能化于一体的…

[java][基础]JSP

目标&#xff1a; 理解 JSP 及 JSP 原理 能在 JSP中使用 EL表达式 和 JSTL标签 理解 MVC模式 和 三层架构 能完成品牌数据的增删改查功能 1&#xff0c;JSP 概述 JSP&#xff08;全称&#xff1a;Java Server Pages&#xff09;&#xff1a;Java 服务端页面。是一种动态的…

Bacnet+springboot部署到linux后,无法检测到网络中的其他设备

场景描述 springbootbacnet4j项目完成后&#xff0c;在window环境可以正常检测到其他设备&#xff0c;但是部署到linux环境之后&#xff0c;无法获取。 解决办法 首先bacnet的子网掩码要设置为&#xff1a;255.255.255.0 确保linux服务器的防火墙允许 255.255.255.255 广播。…

HarmonyOS 5.0应用开发——音频播放组件的封装

【高心星出品】 文章目录 音频播放组件的封装开发步骤封装类代码测试代码 音频播放组件的封装 鸿蒙中提供了AVPlayer来实现音频播放的功能&#xff0c;播放的全流程包含&#xff1a;创建AVPlayer&#xff0c;设置播放资源&#xff0c;设置播放参数&#xff08;音量/倍速/焦点模…

深度探索C++对象模型

文章目录 前言一、关于对象C对象模型 二、构造函数实例分析 拷贝构造函数程序转化语意学(Program Transformation Semantics)成员初始化列表 三、数据语义学(The Semantics of Data)数据存取多种继承情况讨论仅单一继承加上虚函数多重继承虚拟继承 Pointer to Data Members 四、…