html+css3+js 创意设计——滑动登录页面

本文将会展现一步步实现这个案例的过程~

滑动效果如下

拥有登录以及注册界面，两个页面之间的转化过渡丝滑

Step1 编写HTML代码

新建文件夹Login Page，在文件夹下新增login.html文件

并在文件夹下再建立一个images文件夹，里面存有两张图片 image1.png，以及image2.png

（图片以及源码点赞加关注私信获取噢~）

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        滑动切换的注册登录页面
    </title>
</head>

盒子示意图

首先，编写注册，登录盒子

html 复制代码

<body>
    <!-- 最外层大盒子 -->
    <div class="container">
        <!-- 表格盒子 -->
        <div class="form-box">
            <!-- 注册表格盒子 -->
            <div class="register-box hidden">
                <h1>register</h1>
                <input type="text" name="用户名" placeholder="用户名">
                <input type="email" name="邮箱" placeholder="邮箱">
                <input type="password" name="密码" placeholder="密码">
                <input type="password" name="确认密码" placeholder="确认密码">
                <button>注 册</button>
            </div>
            <!-- 登录表格盒子 -->
            <div class="login-box">
                <h1>login</h1>
                <input type="text" name="用户名" placeholder="用户名">
                <input type="password" name="密码" placeholder="密码">
                <button>登 录</button>
            </div>
        </div>
    </div>
</body>

显示效果：

接着，分别编写（注册对应内容页）去登陆&（登录对应内容页）去注册

html 复制代码

<body>
	<!-- 最外层大盒子 -->
    <div class="container">
        <div class="form-box">
            ...
            </div>
           
        <div class="login-box">
                ...
        </div>
     </div>
        <!-- （注册对应内容页）去登陆 -->
        <div class="con-box left">
            <h2>欢迎来到<span>前端星球</span></h2>
            <p>快来开启你的<span>设计</span>旅程吧</p>
            <img src="./images/image1.png" alt="注册">
            <p>已有账号</p>
            <button id="login">去登录</button>
        </div>
        <!--（登录对应内容页）去注册 -->
        <div class="con-box right">
            <h2>欢迎来到<span>前端星球</span></h2>
            <p>提升你的<span>设计·编程</span>能力</p>
            <img src="./images/image2.png" alt="登录">
            <p>没有账号？</p>
            <button id="register">去注册</button>
        </div>
    </div>
</body>

显示效果：

Step2 编写CSS代码

创建并引入CSS文件

首先在Login Page文件夹下，新建login.css文件

在login.html文件中引入:

html 复制代码

<head>
    ...
	<link rel="stylesheet" href="./load.css">
    ...
</head>

初始化&编写body&最外层盒子container&缩小图片

css 复制代码

* {
    /* 初始化 */
    margin: 0;
    padding: 0;
}

body {
    /* 也就是100% 被子元素完全撑开 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    /* body中的盒子垂直居中*/
    justify-content: center;
    /* body中的盒子水平居中*/
    align-items: center;
    /* 渐变轴为 45 度，从蓝色渐变到红色 */
    background: linear-gradient(45deg, rgba(129, 248, 250, 0.655), rgba(248, 144, 217, 0.811));
}

.con-box img {
    width: 160px;
}

.container {
    background-color: #fff;
    width: 620px;
    height: 400px;
    border-radius: 10px;
    /* 阴影 */
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    /* 相对定位 */
    position: relative;
}

到这一步我们可以看到，整个浏览器窗口，也就是body 已经出现了一个渐变的底色。并且可以看到body中的盒子container，也就是我们整个登录注册的最外层盒子（图中白底部分），也已经居中显示。

接着渲染表格盒子，以及其中的注册和登录表格盒子

css 复制代码

.form-box {
    /* 绝对定位 */
    position: absolute;
    /* 上面突出来一小节 */
    top: -12px;
    left: 10px;
    background-color: rgb(255, 205, 219);
    width: 300px;
    height: 424px;
    border-radius: 10px;
    box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.1);
    /* 弹性布局 */
    display: flex;
    /* 内容水平居中显示 */
    align-items: center;
    transition: 1s ease-in-out;
}

.register-box,
.login-box {
    /* 弹性布局 */
    display: flex;
    /* 决定伸缩盒子内的项目排列方式 垂直排列 主轴为垂直方向 */
    flex-direction: column;
    /* 中点对齐 */
    align-items: center;
    width: 100%;
}

设置hidden

可以看到注册表格暂时隐藏了

渲染注册表格盒子&登录表格盒子中的内容

css 复制代码

/* 标题 */
h1 {
    text-align: center;
    margin-bottom: 25px;
    /* 转换为大写 */
    text-transform: uppercase;
    color: #fff;
    /* 设置字间距 */
    letter-spacing: 3px;
}

input {
    /* 将输入框背景改为透明 */
    background-color: transparent;
    width: 70%;
    color: #fff;
    border: none;
    border-bottom: 1.5px solid #fff;
    /* height: 32px; */
    margin: 10px;
    border-radius: 6px;
    padding: 10px 4px;
    font-size: 14px;

}

/* 将输入框中的占位字改为白色 */
input::placeholder {
    color: #fff;
}

/* 当输入框被选中时 */
input:focus {
    color: rgb(222, 142, 165);
    /* 不要默认的选中框 */
    outline: none;
    border-bottom: 2.5px solid rgba(222, 142, 165, 0.662);
}

/* 当选中该输入框时 里面的文字消失 */
input:focus::placeholder {
    opacity: 0;
}

/* 渲染注册/登录按钮 */
.form-box button {
    margin-top: 20px;
    width: 70%;
    height: 40px;
    background: #f6f6f6;
    font-size: 15px;
    font-weight: 700;
    color: rgb(222, 142, 165);
    /* 不要边框 */
    border: none;
    border-radius: 8px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    /* 当鼠标悬浮在按钮上时 变为指针手势 */
    cursor: pointer;
}

/* 鼠标悬浮在按钮上时 背景&字体颜色改变 并且有0.5秒的过渡 */
.form-box button:hover {
    background: rgb(222, 114, 145);
    color: #f3f3f3;
    transition: 0.5s ease;
}

到目前为止，我们的登录页面以及注册页面都设置好啦~ 接下来开始设置内容页啦

去登陆and去注册内容页位置设置

到这一步，我们可以看到我们的内容页还躲在了登录页面之下，因此，我们需要通过绝对定位，来显示我们的内容盒子。并且一个在左边，一个在右边

css 复制代码

.con-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    /* css3  将盒子进行平移操作 向y轴负方向也就是上方 平移半个盒子高度距离*/
    transform: translateY(-50%);
    /* 这两个操作实现盒子的水平居中 */
}

.con-box.left {
    left: 0%;
}

.con-box.right {
    right: 0%;
}

设置完位置之后，然后就渲染内容页中的内容。

其实到了这一步，大家应该知道大概的滑动思路了吧。其实就是当我左边显示的时Login时，右边正常显示"没账号去注册"页面，然后同时将左边"已有账号去登录"给隐藏就好。

当我点击了右侧页面的去注册之后，通过给按钮绑定事件来实现表格盒子的向右平移，并且此时login盒子隐藏 and register盒子取消隐藏，反之亦然后面会有详细代码~

去登陆and去注册内容页内容样式渲染

css 复制代码

.con-box * {
    margin-top: 10px;
}

.con-box h2 {
    color: rgb(154, 154, 154);
    letter-spacing: 3px;
    text-align: center;
}

.con-box h2 span {
    color: rgba(232, 134, 162, 0.87);
    letter-spacing: 3px;
    text-align: center;
}

.con-box p {
    color: rgb(154, 154, 154);
    letter-spacing: 1px;
    text-align: center;
    font-weight: 500;
}

.con-box span {
    font-weight: 700;
}

.con-box img {
    width: 160px;
    /* 之前写过 现在加上这两行即可 */
    /* 设置透明度 */
    opacity: 0.9;
    margin: 20px 0;
}

.con-box button {
    margin-top: 12px;
    background-color: #fff;
    margin-top: 20px;
    width: 30%;
    height: 30px;
    background: #f6f6f6;
    font-size: 13px;
    font-weight: 600;
    color: rgb(222, 142, 165);
    border: none;
    outline: none;
    border-radius: 8px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.con-box button:hover {
    background: rgba(222, 114, 145, 0.687);
    color: #f3f3f3;
    transition: 0.5s ease;
}

好啦现在的效果是这样的！到现在为止，可以看到，我们的css样式都基本上设置好了，但是出现了一个问题，就是本该被表格遮挡住的内容页却显示在了表格上方。我们再修改一下css代码，添加上这一句：

css 复制代码

.form-box {
    ...
	z-index: 2;
    ....
}

z-index 较大的重叠元素会覆盖较小的元素. 将表格盒子的z-index设置为2 使得表格盒子覆盖住内容盒子.

接下来只要通过javascript来实现平移以及隐藏显示效果即可。

Step3 javascript滑动效果

由于代码不长，我们直接在login.html文件中编写javascript

javascript 复制代码

<body>
    ...
	<script>
        // 获得两个按钮
        let register = document.getElementById('register');
        let login = document.getElementById('login');
        // 绑定事件
        let formBox = document.getElementsByClassName('form-box')[0];
        let registerBox = document.getElementsByClassName('register-box')[0];
        let loginBox = document.getElementsByClassName('login-box')[0];

        register.addEventListener('click', () => {
            // 表格盒子向右平移
            formBox.style.transform = 'translateX(100%)';
            loginBox.classList.add('hidden');
            registerBox.classList.remove('hidden');
        })

        login.addEventListener('click', () => {
            // 表格盒子恢复最左侧状态
            formBox.style.transform = 'translateX(0%)';
            registerBox.classList.add('hidden');
            loginBox.classList.remove('hidden');
        })

    </script>
</body>

这样就完成啦！

author @Azureky

@本案例参考了b站一位作者大大：前端研究院的视频加上自己的想法来实现的~

参考来自：这效果，让甲方爸爸高攀不起【HTML5+CSS3+JS滑动切换的注册登录界面】_哔哩哔哩_bilibili 感兴趣的小伙伴也可以去看看视频的效果呀~

html+css3+js 创意设计——滑动登录页面

滑动效果如下

Step1 编写HTML代码

新建文件夹Login Page，在文件夹下新增login.html文件

盒子示意图

首先，编写注册，登录盒子

接着，分别编写（注册对应内容页）去登陆&（登录对应内容页）去注册

Step2 编写CSS代码

创建并引入CSS文件

初始化&编写body&最外层盒子container&缩小图片

接着渲染表格盒子，以及其中的注册和登录表格盒子

设置hidden

渲染 注册表格盒子&登录表格盒子 中的内容

去登陆and去注册内容页位置设置

去登陆and去注册内容页内容样式渲染

Step3 javascript滑动效果

渲染注册表格盒子&登录表格盒子中的内容