巨好看的登录注册界面源码
展示效果
源码
<!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"> 使用<spanstyle="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"> 使用<spanstyle="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>
相关文章：
巨好看的登录注册界面源码
展示效果 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevic…...
Python 数据结构
1.概念 数据结构是计算机科学中的一个核心概念，它是指数据的组织、管理和存储方式，以及数据元素之间的关系。数据结构通常用于允许高效的数据插入、删除和搜索操作。 数据结构大致分为几大类： 线性结构：数组、链表、栈、队列等…...
计算机网络八股文个人总结
1.TCP/IP模型和OSI模型的区别 在计算机网络中，TCP/IP 模型和 OSI 模型是两个重要的网络协议模型。它们帮助我们理解计算机通信的工作原理。以下是它们的主要区别，以通俗易懂的方式进行解释： 1. 模型层数 OSI 模型：有 7 层&#…...
Flutter使用share_plus是提示发现了重复的类
问题描述 我现在下载了share_plus包后发现代码编译不通过，并提示Duplicate class kotlin.collections.jdk8.CollectionsJDK8Kt found in modules jetified-kotlin-stdlib-1.8.22 (org.jetbrains.kotlin:kotlin-stdlib:1.8.22) and jetified-kotlin-stdlib-jdk8-1.7…...
【Linux】编辑器vim 与 编译器gcc/g++
目录 一、编辑器vim： 1、对vim初步理解： 2、vim的模式： 3、进入与退出： 4、vim命令模式下的指令集： 移动光标： 删除： cv： 撤销： 其他： 5、vim底行模…...
音频中sample rate是什么意思？
sample rate在数字信号处理中，指的是采样频率，即每秒钟从连续信号中抽取的样本数量。采样频率越高，信号的还原度越高，但同时也会增加计算负担和存储需求。 实际应用场景 在音频处理中，设置合适的采样率可以…...
Java思想
学习韩老师的java课程 一步一步拆解需求，先写死的再写活的 首先我只是写了个输出一个*的程序 然后写了输出靠墙的1到n，n排n个的*符号输出程序 再写了加入空格的实心金字塔程序，最后写了这个镂空的金字塔 一下就是成品 import java.util.Sc…...
演练纪实丨 同创永益圆满完成10月份灾备切换演练支持
2024年10月，同创永益共支持5家客户圆满完成灾备切换演练，共涉及70多套核心系统总切换与回切步骤6000余个，成功率100%，RTO时长均达到客户要求。 其中耗时最短的一次演练仅花费约3个小时，共涉及32套系统的灾备切换演练&a…...
UE Mutiplayer（1）：网络概述
文章目录 一、Replication二、基本网络概念2.1 网络模式和服务器类型2.2 Actor复制2.3 网络角色和授权2.4 客户端拥有权2.5 相关性和优先级 三、变量复制四、远程过程调用(RPC) 一、Replication 在虚幻引擎中，在客户端与服务器间同步数据和调用程序的过程被称为复制…...
【SQL Server】中关于 COUNT 的一些使用方式区别
前言 使用 SQL Server时，对表或查询结果计算行数是一种常见的操作。了解一些使用 COUNT(*)、COUNT(1) 和 DISTINCT COUNT等的区别对于编写经过优化的高效查询至关重要。本文我们一起探讨这些使用COUNT方式，了解它们的差异与使用。 方式差异 1、COUNT(…...
第5关：主合取范式
任务描述 编程要求 输入 输出 输入样例 输出样例 任务描述 本关任务：求公式(p∨q)→r的主合取范式。 编程要求 根据提示，在右侧编辑器补充代码，计算并输出公式(p∨q)→r的主合取范式 输入 本题无输入。 输出 在单独的一行中输出公式的主合…...
vscode摸鱼学习插件开发
不知道大家在摸鱼的时候，会不会想要学习？ 或者有没有考公人，下班要学习的？ 上班时间摸鱼，下班时间不够学习？ 为此，我决定开发一个vscode插件，来刷粉笔题 粉笔插件名称：…...
多线程编程与并发控制缓存策略负载均衡数据库优化
本人详解 作者：王文峰，参加过 CSDN 2020年度博客之星，《Java王大师王天师》 公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯 山峯 转载说明：务必注明来源（注明：作者：王文峰…...
Gradio DataFrame分页功能详解：从入门到实战
Gradio DataFrame分页功能详解：从入门到实战 1. 引言2. 为什么需要分页？3. 环境准备4. 基础知识准备5. 代码实现5.1 创建示例数据5.2 分页状态管理5.3 分页核心逻辑5.4 创建Gradio界面 6. 关键功能解析6.1 页码计算6.2 数据切片 7. 使用示例8. 实用技巧9…...
[OPEN SQL] FOR ALL ENTRIES IN
FOR ALL ENTRIES IN 语句用于从一个内部表中检索与另一个内部表中指定字段匹配的记录 语法格式 SELECT ... FOR ALL ENTRIES IN <itab> WHERE <cond>. <itab>：插入目标数据内表 <cond>：查询条件 使用FOR ALL ENTRY IN 语句时&…...
每日互动基于 Apache DolphinScheduler 从容应对ClickHouse 大数据入库瓶颈
引言 大家好，我叫张琦，来自每日互动，担任大数据平台架构师。今天我将分享我们团队在基于Apache DolphinScheduler实现ClickHouse零压入库过程中的实践经验。 这个实践项目涉及到两个关键组件：Apache DolphinScheduler和ClickHous…...
Chromium127编译指南 Linux篇 - 同步第三方库以及Hooks(六)
引言 在成功克隆 Chromium 源代码仓库并建立新分支之后，配置开发环境成为至关重要的下一步。这一过程涉及获取必要的第三方依赖库以及设置钩子（hooks），这些步骤对于确保后续的编译和开发工作能够顺利进行起着决定性作用。本指南旨…...
在 Android 设备上部署一个 LLM（大语言模型）并通过 Binder 通信提供服务
在 Android 设备上部署一个 LLM（大语言模型）并通过 Binder 通信提供服务，需要以下几个步骤。具体实现是通过定义一个 Android HAL 服务，并且在 init.rc 文件中启动该服务。我们将一步一步解释如何实现一个可通过 Binder 通信的服务（如 vendor.te.aimodel-service）。 一 …...
安科瑞AMB400分布式光纤测温系统解决方案--远程监控、预警，预防电气火灾
安科瑞戴婷 可找我Acrel-Fanny 安科瑞AMB400电缆分布式光纤测温具有多方面的特点和优势： 工作原理： 基于拉曼散射效应。激光器产生大功率的光脉冲，光在光纤中传播时会产生散射。携带有温度信息的拉曼散射光返回光路耦合器，耦…...
docker-compose安装rabbitmq 并开启延迟队列和管理面板插件（rabbitmq_delayed_message_exchange）
问题： 解决rabbitmq-plugins enable rabbitmq_delayed_message_exchange ：plugins_not_found 我是在docker-compose环境部署的 services:rabbitmq:image: rabbitmq:4.0-managementrestart: alwayscontainer_name: rabbitmqports:- 5672:5672- 15672:156…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣（LeetCode） 思路 使用两个栈：一个存储重复次数，一个存储字符串 遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...