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

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

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

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

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

相关文章

阿里云docker安装禅道记录

docker network ls docker network create -d bridge cl_network sudo docker run --name zentao --restart always -p 9982:80 --networkcl_network -v /data/zentao:/data -e MYSQL_INTERNALtrue -d hub.zentao.net/app/zentao:18.5 参考&#xff1a;用docker安装禅道…

c++联合

结构体与联合体的区别 结构体(struct)中所有变量是“共存”的——优点是“有容乃大”&#xff0c;全面&#xff1b;缺点是struct内存空间的分配是粗放的&#xff0c;不管用不用&#xff0c;全分配。 而联合体(union)中是各变量是“互斥”的——缺点就是不够“包容”&#xff…

XSS-libs

靶场下载地址&#xff1a;https://github.com/do0dl3/xss-labs 下载完成后解压到phpstudy的根目录下&#xff0c;访问就可以 第一关 参数name 存在alert函数&#xff0c;插入&#xff1a;<script>alert(1)</script>&#xff0c;会调用该函数&#xff0c;然后就会返…

人脑与机器连接:神经科技的伦理边界探讨

内容概要 在当今科技飞速发展的时代&#xff0c;人脑与机器连接已成为一个引人注目的前沿领域。在这一背景下&#xff0c;神经科技的探索为我们打开了一个全新的世界&#xff0c;从脑机接口到人工智能的飞跃应用&#xff0c;不仅加速了技术的进步&#xff0c;更触动了我们内心…

基于向量检索的RAG大模型

一、什么是向量 向量是一种有大小和方向的数学对象。它可以表示为从一个点到另一个点的有向线段。例如&#xff0c;二维空间中的向量可以表示为 (&#x1d465;,&#x1d466;) &#xff0c;表示从原点 (0,0)到点 (&#x1d465;,&#x1d466;)的有向线段。 1.1、文本向量 1…

数字媒体技术基础:AMF(ACES 元数据文件 )

在现代电影和电视制作中&#xff0c;色彩管理变得越来越重要。ACES&#xff08;Academy Color Encoding System&#xff0c;美国电影艺术与科学学院颜色编码系统&#xff09;是一个广泛采用的色彩管理和交换系统&#xff0c;旨在解决不同设备、软件和工作流程之间的色彩不一致问…

k8s环境下rabbitmq安装社区插件:rabbitmq_delayed_message_exchange

怎么在k8s环境下的rabbitmq安装社区版插件:rabbitmq_delayed_message_exchange 在你的rabbit-value.yaml中加入以下行&#xff0c;然后使用helm重新安装&#xff08;最好把pvc也删了重新安装&#xff08;如果你的密码变化了的话&#xff09; 减少出错概率&#xff09; ## par…

C++ | Leetcode C++题解之第526题优美的排列

题目&#xff1a; 题解&#xff1a; class Solution { public:int countArrangement(int n) {vector<int> f(1 << n);f[0] 1;for (int mask 1; mask < (1 << n); mask) {int num __builtin_popcount(mask);for (int i 0; i < n; i) {if (mask &am…

Blender进阶:贴图与UV

9 UV 9.1 贴图与UV UV&#xff0c;指定每个面顶点在贴图上的坐标 演示&#xff1a; 1、添加物体 2、添加贴图&#xff0c;即图片纹理节点 3、进入UV Edit工作区 4、右边&#xff0c;选择一个面 5、左边&#xff0c;选择一个面&#xff0c;移动这个面 9.2 电子表格 电子…

vue项目安装组件失败解决方法

1.vue项目 npm install 失败 删除node_modules文件夹、package-lock.json 关掉安装对话框 重新打开对话框 npm install

uniapp ,微信小程序,滚动(下滑,上拉)到底部加载下一页内容

前言 小程序的内容基本都是滑动到底部加载下一页&#xff0c;这个一般都没有什么好用的组件来用&#xff0c;我看vant和uniapp的插件里最多只有个分页&#xff0c;没有滚动到底部加载下一页。再次做个记录。 效果预览 下滑到底部若是有下一页&#xff0c;则会自动加载下一页&…

分布式光伏系统管理捷径——借助专业软件

在当前信息化时代&#xff0c;管理软件已经成为了各行各业中不可或缺的工具&#xff0c;光伏行业亦是如此。使用专业管理软件&#xff0c;可以帮助光伏企业实现高效管理、提高工作效率的同时降低成本&#xff0c;进而提升竞争力。本文将以客户反映较好的鹧鸪云光伏光伏与储能管…

C++基础:异常

紧接上一篇错误&#xff0c;看C如何应对这些错误问题&#xff0c;与现代编程语言类型&#xff0c;C也提供了一种错误处理机制&#xff1a;异常。 异常&#xff1a; 为了保证检测到的错误不会被遗漏&#xff0c;异常处理的的基本思想是把错误检测&#xff08;在被调函数中完成&a…

「Qt Widget中文示例指南」如何实现窗口嵌入?

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 本文中的示例主要演…

大数据之——MapReduce代码详解(包括无敌避坑wordcount项目)

其实这一篇我有简单提到这个MapReduse的概念&#xff0c;但是只是粗略的讲解&#xff0c;可以去大致看一眼MapReduse跟HDFS、YARN的关系&#xff1a; 大数据之——Hadoop的HDFS、YARN、MapReduce_大数据hdfs-CSDN博客 &#xff08;另外注意&#xff0c;这一篇文章需要有一定ja…

浅谈人工智能之DB-GPT环境安装

浅谈人工智能之DB-GPT环境安装 简介 DB-GPT 是一个旨在将大型语言模型与数据库操作相结合的工具&#xff0c;允许用户通过自然语言与数据库进行交互。为了充分发挥 DB-GPT 的功能&#xff0c;您需要在本地或服务器上安装并配置相应的环境。本文将为您提供详细的安装步骤。本文…

032_Tiledlayout_in_Matlab中的分块图布局

贴砖多图新方式 从R2019b开始&#xff0c;MATLAB提供了新的贴砖多图方式&#xff0c;可以更加方便的绘制多个子图。 这个功能由以下函数构成&#xff1a; tiledlayoutnexttiletilenumtilerowcol tiledlayout和TiledChartLayout对象 tiledlayout函数用于创建一个贴砖布局&a…

Vue 事件阻止 e.preventDefault();click.prevent

Vue 事件阻止 Vue 事件阻止 e.preventDefault(); click.prevent修饰符

华为荣耀曲面屏手机下面空白部分设置颜色的方法

荣耀部分机型下面有一块空白区域&#xff0c;如下图红框部分 设置这部分的颜色需要在themes.xml里面设置navigationBarColor属性 <item name"android:navigationBarColor">android:color/white</item>

ELK之路第四步——整合!打通任督二脉

ELK之路第四步——整合&#xff01;打通任督二脉 前言1.架构2.下载资源3.整合开始1.分别启动三个es2.启动kibana3.新建filebeat_logstash.yml配置文件4.修改logstash的启动配置文件5.启动logstash6.启动filebeat7.Kibana查看 4.结语 前言 在开始本篇之前&#xff0c;你需要用到…