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

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

<!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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机械臂建模之DH表

本文配图 取自哔哩哔哩机器人学视频 林沛群老师的PPT 机械臂几何直观描述 首先要知道DH表中四个参数的含义&#xff1a; 对于 a 、 α 、 d 、 θ i a、 \alpha 、 d 、 \theta_i a、α、d、θi​ 四个参数&#xff0c;上图采用MDH的方式&#xff0c;对于一个轴的这四个参数&a…

Flink CDC系列之:学习理解核心概念——Data Pipeline

Flink CDC系列之&#xff1a;学习理解核心概念——Data Pipeline 数据管道sourcesink管道配置Table IDroutetransform案例 数据管道 由于 Flink CDC 中的事件以管道方式从上游流向下游&#xff0c;因此整个 ETL 任务被称为数据管道。 管道对应于 Flink 中的一系列操作。 要描…

Git 本地操作(2)

会以下操作就可以完成本地的版本控制了&#xff0c;就不需要再复制文件每次改一个东西就复制整个工程保存下来啦&#xff01; 建议先看上一篇文章噢 &#xff01;&#xff01;&#xff01; 一、新建项目git本地操作 1、初始化仓库 创建一个 project 文件夹&#xff0c;将需…

Python Requests 的高级使用技巧:应对复杂 HTTP 请求场景

介绍 网络爬虫&#xff08;Web Crawler&#xff09;是自动化的数据采集工具&#xff0c;用于从网络上提取所需的数据。然而&#xff0c;随着反爬虫技术的不断进步&#xff0c;很多网站增加了复杂的防护机制&#xff0c;使得数据采集变得更加困难。在这种情况下&#xff0c;Pyt…

Linux中NFS配置

文章目录 一、NFS介绍1.1、NFS的工作流程1.2、NFS主要涉及的软件包1.3、NFS的主要配置文件 二、安装NFS2.1、更新yum2.2、安装NFS服务2.3、配置NFS服务器2.4、启动NFS服务2.5、配置防火墙&#xff08;如果启用了防火墙&#xff0c;需要允许NFS相关的端口通过&#xff09;2.6、生…

MATLAB发票识别系统

课题介绍 该课题为基于MATLAB的发票识别系统。主要识别发票的编号。可定做发票的日期&#xff0c;金额等字段的识别。通过输入图片&#xff0c;校正&#xff0c;定位目标区域&#xff0c;分割&#xff0c;字符分割&#xff0c;模板匹配识别&#xff0c;得出结果。整个设计包含…

前端拖拽库方案之react-beautiful-dnd

近期&#xff0c;知名 React 拖拽库 react-beautiful-dnd 宣布了项目弃用的决定&#xff0c;未来将不再维护。这一决定源于其存在的缺陷与局限性&#xff0c;促使作者转向开发一个更加现代化的拖拽解决方案——Pragmatic drag and drop&#xff08;下面会介绍&#xff09;&…

Rust 力扣 - 643. 子数组最大平均数 I

文章目录 题目描述题解思路题解代码题解链接 题目描述 题解思路 我们遍历长度为k的窗口&#xff0c;我们只需要记录窗口内的最大和即可&#xff0c;遍历过程中刷新最大值 结果为窗口长度为k的最大和 除以 k 题解代码 impl Solution {pub fn find_max_average(nums: Vec<…

Linux——五种IO模型

目录 一IO基本理解 二五种IO模型 1五种IO模型示意图 2同步IO和异步IO 二非阻塞IO 1fcntl 2实现非阻塞IO 三多路复用 1select 1.1定位和作用 1.2介绍参数 1.3编写多路复用代码 1.4优缺点 2poll 2.1作用和定位 2.2介绍参数 2.3修改select代码 3epoll 3.1介绍…

php解密,sg11解密-sg15解密 如何由sourceGuardian11-sourceGuardian15加密(sg11加密~sg15加密)的源码

sg11加密~sg11加密的PHP文件运行需安装SG11加密-SG15加密组件使用、支持WINDOW及LINUX各版本 sg11解密(SourceGuardian)-sg15解密(SourceGuardian)&#xff0c;号称目前最安全的组件加密已可以解密&#xff0c;解密率99.9%&#xff0c;基本可以直接使用&#xff0c;代码特征是…

Jetson OrinNX平台CSI相机导致cpu load average升高问题调试

1. 前言 硬件: Orin NX JP: 5.1.2, R35.4.1 用v4l2-ctl --stream-mmap -d0 命令去获取相机数据时, 用top查看cpu使用情况, CPU占用率很低,但load average在1左右, 无任何程序运行时,load average 为0 用ps -aux 查看当前进程情况,发现有两个系统进程vi-output, …

qt QIcon详解

1、概述 QIcon是Qt框架中的一个类&#xff0c;专门用于处理和显示图标。它提供了灵活的接口&#xff0c;支持从多种来源加载图标&#xff0c;如文件、资源或系统主题&#xff0c;并且支持多种图像格式&#xff0c;如PNG、JPEG、SVG等。QIcon类能够与Qt中的各种控件&#xff08…

【操作系统实验课】Linux操作基础

1. 打开Ubuntu Ubuntu-22.04 虚拟机安装-CSDN博客 打开虚拟机软件 启动其中的Ubuntu22.04 打开Ubuntu系统终端 2. 创建目录和文件 创建test3目录&#xff1a; 在终端中输入命令&#xff1a;mkdir /test3。此命令用于在根目录下创建test3目录。&#xff08;注意在命令中&…

【Linux-进程间通信】匿名管道的应用-进程池实现+命名管道的应用ClientServer通信

匿名管道的应用--进程池/C实现 当系统中需要处理众多任务时&#xff0c;可以将这些任务分配给多个子进程来分担工作。然而&#xff0c;频繁地创建和销毁进程会导致较高的时间成本。为减少这种开销&#xff0c;可以采取预先创建一组子进程的策略&#xff08;以避免在任务分配时…

java设计模式之创建者模式(5种)

设计模式 软件设计模式&#xff0c;又称为设计模式&#xff0c;是一套被反复利用&#xff0c;代码设计经验的总结&#xff0c;他是在软件设计过程中的一些不断发生的问题&#xff0c;以及该问题的解决方案。 **创建者模式又分为以下五个模式&#xff1a;**用来描述怎么“将对象…

数据库->数据库约束

目录 一、数据库约束 1.定义 2.约束类型 3.NOT NULL 非空约束 4. UNIQUE 唯一约束 5.PRIMARY KEY 主键约束 1.主键的使用 2.把表中的主键交给数据库自己维护 2.1主键列设置为null 则使用自增 2.2插入除了主键以外的所有非空列&#xff08;推荐方法&#xff09; 2.3自…

ValueError: Object arrays cannot be loaded when allow_pickle=False

文章目录 问题解决方法1&#xff1a;allow_pickleTrue解决方法2&#xff1a;降低numpy版本错误原因&#xff1a;python和numpy版本不兼容 问题 Traceback (most recent call last): File “D:\project\test_st\retrieval\read_npy.py”, line 4, in data np.load(‘mosi0__le…

HTML CSS

目录 1. 什么是HTML 2. 什么是CSS ? 3. 基础标签 & 样式 3.1 新浪新闻-标题实现 3.1.1 标题排版 3.1.1.1 分析 3.1.1.2 标签 3.1.1.3 实现 3.1.2 标题样式 3.1.2.1 CSS引入方式 3.1.2.2 颜色表示 3.1.2.3 标题字体颜色 3.1.2.4 CSS选择器 3.1.2.5 发布时间字…

Prometheus和Grafana的安装部署

初识Prometheus和Grafana 通常来说&#xff0c;对于一个运行时的复杂系统&#xff0c;如果系统出了问题是很难排查的。因为你是不太可能在运行时一边检查代码一边调试的。因此&#xff0c;你需要在各种关键点加上监控&#xff0c;通过监控获取的数据&#xff0c;指导我们进一步…

ubuntu20.04 加固方案-设置用户缺省UMASK

一、编辑/etc/profile配置文件 打开终端。 查看当前umask 使用文本编辑器&#xff08;如vim&#xff09;编辑/etc/profile文件。 sudo vim /etc/profile 二、添加配置参数 在打开的配置文件的末尾中&#xff0c;添加或修改以下参数&#xff1a; umask 027 三、保存并退出…