首先看一下效果图，登录界面，后面的背景图片可以替换成任意喜欢的图片，当然也可以设置为纯色背景：
之后点击“立即注册”就可以来到注册页面：
接下来就直接上代码了，只设计前端界面部分：
1. html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录/注册</title>
<link rel="stylesheet" href="../../dist/css/common/auth.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1347266_1120imkhssrc.css">
<script src="../../dist/js/jquery-3.3.1.min.js"></script>
<script src="../../dist/js/auth.js"></script>
</head>
<body>
<button id="btn">登录/注册</button>
<div class="mask-wrapper">
<div class="auth-group">
<div class="close-group">
<span class="close-btn icon-baseline-close-px iconfont"></span>
</div>
<div class="auth-scroll-wrapper">
<div class="scroll-wrapper">
<div class="auth-group signin-group">
<div class="auth-info">
<div class="title-group">
<span class="title">请登录</span>
<a href="javascript: void(0);" class="switch">立即注册></a>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="telephone" placeholder="请输入手机号">
</div>
<div class="input-group">
<input type="password" class="form-control" name="password" placeholder="请输入密码">
</div>
<div class="input-group">
<label class="remember-label">
<input type="checkbox" class="remember" value="1"> 记住我
</label>
</div>
<div class="input-group">
<input type="submit" class="submit" value="立即登录">
</div>
</div>
</div>
</div>
<div class="auth-group signup-group">
<div class="auth-info">
<div class="title-group">
<span class="title">请注册</span>
<a href="javascript: void(0);" class="switch">立即登录></a>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="telephone" placeholder="请输入手机号">
</div>
<div class="input-group">
<input type="text" class="form-control" name="username" placeholder="请输入用户名">
</div>
<div class="input-group">
<input type="password" class="form-control" name="password" placeholder="请输入密码">
</div>
<div class="input-group">
<input type="password" class="form-control" name="repeat-password" placeholder="确认密码">
</div>
<div class="input-group">
<input type="text" class="form-code" name="graphic-code" placeholder="图形验证码">
</div>
<div class="input-group">
<input type="text" class="form-code" name="message-code" placeholder="短信验证码">
</div>
<div class="input-group">
<input type="submit" class="submit" value="立即注册">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. scss 部分：
(1)auth.scss
@import "init.scss";
@import "constants.scss";
.mask-wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
// 设置背景图片
background-image: url('../../../dist/images/auth/auth.min.gif');
//opacity: 0.5;
// 设置背景图片平铺重复的方向
background-repeat: no-repeat;
// 覆盖整个div盒子
background-size: cover;
//display: none;
// 超过父盒子的大小，设置子盒子滚动显示
overflow-y: scroll;
//font-weight: 800;
.auth-group {
$authGroupWidth: 400px;
$authGroupHeight: 540px;
$authGroupWidth;
height: $authGroupHeight;
margin: 80px auto;
//position: relative;
.close-group {
100%;
height: 40px;
background: #fff;
.close-btn {
display: inline-block;
float: right;
30px;
height: 30px;
cursor: pointer;
margin-top: 10px;
}
}
.auth-scroll-wrapper {
$authGroupWidth;
height: $authGroupHeight - 40px;
position: relative;
overflow: hidden;
.scroll-wrapper {
$authGroupWidth*2;
height: 100%;
position: absolute;
left: 0;
top: 0;
.auth-group {
$authGroupWidth;
height: 100%;
margin-top: 0;
.auth-info {
padding: 0 20px;
box-sizing: border-box;
.title-group {
100%;
height: 56px;
overflow: hidden;
border-bottom: 1px solid $borderColor;
line-height: 54px;
.title {
float: left;
border-bottom: 3px solid $themeColor;
}
.switch {
float: right;
text-decoration: none;
}
}
.form-group {
margin-top: 20px;
.input-group {
margin-bottom: 20px;
.form-control {
100%;
height: 40px;
outline: none;
border: 1px solid $borderColor;
padding: 10px;
box-sizing: border-box;
}
.remember-label {
font-size: 14px;
}
.submit {
100%;
height: 40px;
background: $themeColor;
border: none;
outline: none;
color: #fff;
cursor: pointer;
}
}
}
}
}
.signin-group {
float: left;
background: #fff;
height: 300px;
}
.signup-group {
float: right;
background: #fff;
.auth-info {
.form-group {
.input-group {
.form-code {
70%;
height: 40px;
float: left;
margin-bottom: 20px;
outline: none;
padding: 10px;
box-sizing: border-box;
border: 1px solid $borderColor;
}
}
}
}
}
}
}
}
}
(2)init.scss,因为本人使用的是Google浏览器，该部分scss是用来清除浏览器自带大样式的，如果您使用的是其他浏览器，可能这部分会不起作用。只需将您使用的浏览器自带的样式，复制到init.scss文件中，并且在auth.scss文件中进行import就可以了。
// Every scss files need init's
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {
margin: 0;
padding: 0;
}
(3)constants.scss文件用来定义一些常用的变量，
$themeColor: #5c87d9;
$assistColor: #878787;
$borderColor: #eeeeee;
$mainFrontColor: #212121;
3. js文件
(1)auth.js文件：
// 定义一个监听按钮登录和注册功能和关闭按钮的事件
$(function () {
$("#btn").click(function () {
$(".mask-wrapper").show();
});
$(".close-btn").click(function () {
$(".mask-wrapper").hide();
});
});
// 定义监听登录和注册页面之间的跳转事件
$(function () {
$(".switch").click(function () {
var scrollWrapper = $(".scroll-wrapper");
var wrapperLeft = scrollWrapper.css("left");
// 一定要将获取到的wrapperLeft的值（像素值）转换为整数，否者的话，不能进行与0比较
currentLeft = parseInt(wrapperLeft);
if(currentLeft < 0){
scrollWrapper.animate({"left": "0"});
}else {
scrollWrapper.animate({"left": "-400px"});
}
});
});
4. 另外使用到的jquery-3.3.1.min.js文件，我也会上传文件，需要注意的是在html使用scss,js文件的时候，需要使用自己的文件路径。
提取码：gkr0