一、效果演示

[注]: 这里需要我们创建三个文件，一个是index.html文件，一个是style.css文件还有一个是login.js文件，把代码copy上去只要路径找好就能正常运行了。
演示地址：演示链接

二、代码实现

2.1、HTML主页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>登录注册界面</title><link rel="stylesheet" href="style.css">
</head><body><!-- 整体布局 --><div class="container right-panel-active"><!-- 注册框 --><div class="container_from container_signup"><form action="#" class="from" id="from1"><h2 class="form_title">注册账号</h2><input type="tel" placeholder="Telephone" class="input" pattern="^1[0-9]{10}$"><input type="text" placeholder="Username" class="input"><input type="password" placeholder="Password" class="input"><button class="btn">点击注册</button></form></div><!-- 登录框 --><div class="container_from container_signin"><form action="#" class="from" id="from2"><h2 class="form_title">欢迎登录</h2><input type="text" placeholder="Username" class="input"><input type="password" placeholder="Password" class="input"><div><span>记住密码</span><input type="checkbox" name="rup" id="rup" /><span>自动登录</span><input type="checkbox" name="autoLogin" /></div><a href="#" class="link">忘记密码?</a><button class="btn">登录</button></form></div><!--控制注册与登录移动--><div class="container_overlay"><div class="overlay"><div class="overlay_panel overlay_left"><button class="btn" id="signin">已有账号，直接登录</button></div><div class="overlay_panel overlay_right"><button class="btn" id="signup">没有账号，点击注册</button></div></div></div></div><script src="login.js"></script>
</body></html>

2.2、CSS代码

/* :root根伪类--为自定义CSS属性方便我们重复使用同一个属性自定义属性使用var()进行定义*/
:root {/* 背景颜色 */--white: #e9e9e9;--gray: #333;--blue: 口 #0367a6;--lightblue: 口 #008997;/*外边框圆角属性*/--button-radius: 0.7rem;/* 登录注册框的大小 */--max-width: 758px;--max-height: 420px;/*字体样式*/font-size: 16px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}body {align-items: center;background-color: #e9e9e9;background: url(home4.jpg);background-attachment: fixed;/* */background-position: center;background-repeat: no-repeat;background-size: cover;display: grid;height: 100vh;place-items: center;
}.from_title {font-weight: 300;margin: 0;margin-bottom: 1.25rem;
}.link {color: rgb(90, 105, 238);font-size: 0.9rem;margin: 1rem 0 0 0;text-decoration: none;
}/* 注册框 */
.container {background-color: var(--white);border-radius: var(--button-radius);box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25);height: var(--max-height);max-width: var(--max-width);overflow: hidden;position: relative;width: 100%;
}.container_from {height: 100%;position: absolute;top: 0;transition: all 0.6s ease-in-out;
}/* 登录框 */
.container_signin {/*控制登录界面移动 */left: 0%;width: 50%;z-index: 2;/*控制移动顺序 */
}#rup {margin-right: 2rem;
}.container .right-panel-active .container_signin {transform: translateX(100%);
}.container_signup {left: 0;opacity: 0;width: 50%;z-index: 1;
}.container.right-panel-active .container_signup {animation: show 0.6s;opacity: 1;transform: translateX(100%);z-index: 5;
}.container_overlay {height: 100%;Left: 50%;overflow: hidden;position: absolute;top: 0;transition: transform 0.6s ease-in-out;width: 50%;z-index: 100;
}/* 设置左右透明 移动 */
.container.right-panel-active .container_overlay {transform: translateX(-100%);
}.overlay {background-color: var(--lightblue);/* background-color: #008997; */background: url(home4.jpg);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;height: 100%;left: -100%;position: relative;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 200%;
}/* 左边页面透明 移动 */
.container.right-panel-active .overlay {transform: translatex(50%);
}.overlay_panel {align-items: center;display: flex;flex-direction: Column;height: 100%;justify-content: center;position: absolute;text-align: center;top: 0;transform: translateX(0);transition: transform 0.6s ease-in-out;width: 50%;
}/* 控制按钮移动  transform:translate(x,y)属性*//* 跳转到登录界面 */
.overlay_left {transform: translateX(-5%);
}.container .right-panel-active .overlay_left {transform: translateX(0);
}/* 跳转到注册界面 */
.overlay_right {right: 0;transform: translateX(0);
}.container .right-panel-active .overlay_right {transform: translateX(20%);
}/* 设置按钮 */
.btn {background-color: skyblue;background-image: linear-gradient(to right, skyblue, pink 65%);border-radius: 5px;margin: 0px;border: 1px solid skyblue;color:#222831;cursor: pointer;font-size: 0.8rem;font-weight: bold;letter-spacing: 0.1rem;padding: 0.9rem 4rem;/* 过渡的时间还有样式 */text-transform: uppercase;transition: transform 80ms ease-in;
}form>.btn {margin-top: 1.5rem;
}/* 鼠标放上去让按钮缩小 */
.btn:hover {transform: scale(0.95);
}/* 设置点击没有边框 */
input:focus {outline: none;border: 1px solid skyblue;
}/* 登录表单 */
.from {background-color: var(--white);display: flex;align-items: center;/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */justify-content: center;/*  flex-direction: column; 垂直显示 */flex-direction: column;padding: 0 4rem;height: 100%;text-align: center;
}/* 输入账号密码框样式设置 */
.input {background-color: #fff;border: 1px solid white; padding: 0.9rem 0.9rem;margin: 0.5rem 0;width: 100%;border-radius: 20px;
}@keyframes show {0%,50% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}
}

2.3、JS代码

const signinBtn = document.getElementById("signin");
const signupBtn = document.getElementById("signup");
const container = document.querySelector(".container");signinBtn.addEventListener("click", () => {container.classList.remove("right-panel-active")
})signupBtn.addEventListener("click", () => {container.classList.add("right-panel-active")
})

-------------------------------结束----------------------------

HTML+CSS登录注册界面相关推荐

【HTML+CSS】高级、简约的移动端登录注册界面，HR看了直呼里面请
一.静态页面index.html <!DOCTYPE html> <html lang="en"><head><meta charset= ...
【HTML,CSS,JS】选项卡+登录注册界面
选项卡+登录注册界面源码 HTML CSS JavaScript 效果源码 HTML <!DOCTYPE html> <html><head><meta ...
右侧按钮登录注册html,翻转式用户登录注册界面设计
这是一款非常实用的翻转式用户登录注册界面设计效果.该用户登录注册界面使用纯CSS3来制作,在用户点击登录和注册两个按钮时,登录和注册界面可以以水平翻转的方式来回切换,效果非常的酷. 制作方法 HTML ...
python做一个登录注册界面_Python 实现简单的登录注册界面
Python 实现简单的登录注册界面注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...
bootstrap实现登录注册界面
文章来自:源码在线https://www.shengli.me/css/65.html: Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.Bo ...
超酷超实用的登录/注册界面，保你看完不后悔（无套路提供源码）
文章目录概述效果(背景图片可改变) 代码 index.html style.css index.js background.jpg(可以改,同名) 概述应读者要求,蒟蒻君这次写了一个登录/注册的 ...
php mysql注册登录界面_php实现登录注册界面
php实现登录注册界面首先你要搭建一个自己的数据库我用wamp64创了一个people的数据库具体操作可以参考该搭建链接: 这里就讲下我实现的功能代码: 创建sql.func.php实现一些基本 ...
Android开发：登录/注册界面的编写
目录新建一个空项目(或Activity) 在xml中绘制登录界面关掉ActionBar 运行(最终效果图) 后记在实际开发中,几乎所有的APP都会涉及到用户注册/登录页面的制作,因此本文以And ...
html5/css登录注册网页模板
html5/css登录注册网页模板免费下载地址:https://www.html5tricks.com/9-useful-html5-css3-login-form.html

HTML+CSS登录注册界面

目录

一、效果演示

二、代码实现

2.1、HTML主页面

2.2、CSS代码

2.3、JS代码

HTML+CSS登录注册界面相关推荐

最新文章

热门文章