目录
- 一、效果演示
- 二、代码实现
- 2.1、HTML主页面
- 2.2、CSS代码
- 2.3、JS代码
一、效果演示
[注]: 这里需要我们创建三个文件，一个是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")
})-------------------------------结束----------------------------
