效果展示页面

html部分

这里是基本的html页面和一些基本的class设置，这样的效果实际上是分了三个部分来完成的，一个是注册页面在右侧，一个是登陆页面在左侧，另一个就是遮盖部分，在注册和登录部分都使用了from表单，里面包含了一个h2标签设置了三个input标签里面也都填充了相应的虚幻内容并且设置了相应的类型，另外还有一个按钮，点击注册和登录，在叠层部分目前来看仅仅设置了几个div和按钮。后面会有解释

        <!-- 注册部分 -->
        <div class="container-from container-signup">
            <form action="#" class="form" id="from1">
                <h2 class="form-title">注册账号</h2>
                <input type="text" placeholder="User" class="input" />
                <input type="email" placeholder="Email" class="input" />
                <input type="password" placeholder="Password" class="input">
                <button type="button" class="btn">点击注册</button>
            </form>
        </div>
        <!-- 登录 -->
        <div class="container-from container-signin">
            <form action="#" class="form" id="from2">
                <h2 class="form-title">欢迎登录</h2>
                <input type="email" placeholder="Email" class="input" />
                <input type="password" placeholder="Password" class="input">
                <a href="#" class="link">忘记密码</a>
                <button type="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>
</body>

效果暂时是这样的

下面是css部分

首先这里对默认样式进行了清除，随后对整个body进行了样式设置，minheight100则是设置成了窗口大小，随后引入了背景图片，不会被重复，并且固定在视窗中不随滚动条的滚动而移动 */，针对背景图做了一些列的样式设置，代码上有详细的注释解释，覆盖整个视口，并且随着视口大小自动调整，并且设置了一些模糊效果，随后进行了弹性盒居中。

* {
            margin: 0;
            padding: 0;
        }
        body {
            /* 对整个body进行设置 */
            min-height: 100vh;
            /* 将图片置于背景的中心位置。背景图片不会被重复，并且固定在视窗中不随滚动条的滚动而移动 */
            background: #e7e7e7 url("bg.jpg") center no-repeat fixed;
            background-color: cover; /*设置背景的颜色，将背景的颜色设为尺寸覆盖整个视窗。*/
            background-size: cover;  /*设置背景图片的尺寸大小，使其随视窗大小的变化而自动调整，以覆盖整个背景区域。*/
            backdrop-filter: blur(2px); /* 设置背景的模糊效果*/
            /*弹性布局居中*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

接着，这里面就设置了一块阴影部分，并且随后的登录和组测部分都在此进行了相对定位，溢出的部分进行隐藏设置了最大宽度为max-width: 750px;

 .container {
            background-color: #e7e7e7;
            border-radius: 0.7rem;
            /* 设置阴影效果，它的水平偏移量为 0，垂直偏移量为 0.9rem（即相对于元素的顶部距离），模糊半径为 1.7rem，颜色为 rgba(0, 0, 0, 0.25)。 */
            box-shadow:
                0 0.9rem 1.7rem rgba(0, 0, 0, 0.25) 0 0.7rem 1.7rem rgba(0, 0, 0, 0.22);
            height: 420px;
            max-width: 750px;
            overflow: hidden;
            position: relative;  /*父元素进行定位*/
            width: 100%;
        }

针对这些css样式进行了处理主要把表单进行了定位，同时注册部分和登陆部分分别设置了zindex层级关系，使之有更好的展示效果，并且把注册部分暂时通过opacity隐藏了起来，主要针对整个form表单进行了设置为弹性盒，居中后改变主轴方向为y轴，纵列排放，同时设置了文字的也居中

   .container-from {
            height: 100%;
            position: absolute; /*表单相对于container进行定位*/
            top: 0;
            transition: all 0.6s ease-in-out; /*设置动画效果适用于全部 0.6秒执行，平滑过渡*/
        }
        .container-signin {
            /* 登录部分整体设置 */
            left: 0;
            width: 50%;
            z-index: 2;
        }
        .container-signup {
            /* 注册部分 */
            left: 0;
            width: 50%;
            z-index: 1;
            opacity: 0;
            /* 透明不可见 */
        }
         .form {
            display: flex;
            align-items: center;
            justify-content: center;
            /*更改默认弹性盒主轴方向居中*/
            flex-direction: column;
            padding: 0 3rem;
            height: 100%;
            /* 文字居中 */
            text-align: center;
            background-color: #e7e7e7;
        }

接下来针对一些form表单的各个部件进行优化首先就是标题部分，设置了向下的高度，忘记密码部分设置了字体大小和margin，改变了字体颜色，文本框做出了优化效果，背景颜色更改以及margin的设置，同时将border和外边框取消掉，设置圆角最后对按钮进行美化，设置颜色的阴影，设置鼠标移入样式，字体等，添加了点击缩放动画； letter-spacing: 0.1rem 属性设置字符间的间距为 0.1rem。这意味着文本中的字符将会相对于默认的间距稍微拉宽或缩小

  .form-title {
            /* 标题界面 */
            font-weight: 300;
            margin: 0;
            margin-bottom: 2rem;
        }
        .link {
            /* 忘记密码部分 */
            color: #333;
            font-size: 0.9rem;
            margin: 1.5rem 0;
            margin-bottom: 2px;
            /* 用于去除文本的装饰效果 */
            text-decoration: none;
        }
        .input {
            /* 对整体文本框的一个优化 */
            width: 100%;
            background-color: #fff;
            padding: 0.9rem 0.9rem;
            margin: 0.5rem 0;
            border: none;
            outline: none;
            border-radius: 6px;
        }
        .btn {
            /* 对整个按钮的样式美化 */
            background-color: #f25d8e;/*背景颜色，阴影，弧度，文字颜色，鼠标样式，文字样式*/
            box-shadow: 0 4px 4px rgba(255, 112, 159, 0.3);
            border-radius: 6px;
            color: #e7e7e7;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: bold;
            /* 属性设置字符间的间距为 0.1rem。这意味着文本中的字符将会相对于默认的间距稍微拉宽或缩小 */
            letter-spacing: 0.1rem;
            padding: 0.9rem 4rem;
            /* 关于缓动函数，ease-in 是其中一种，它在动画开始时具有较慢的加速度，逐渐加快。除了 ease-in，还有很多其他的缓动函数可供选择，如 ease-out（慢慢变慢）、ease-in-out（加速再减速）等。 */
            /* transition 属性指定了过渡效果的属性、持续时间和缓动函数。具体来说，transform 是过渡效果应用到的 CSS 属性，80ms 是过渡效果的持续时间，ease-in 是过渡效果的缓动函数。 */
            transition: transform 80ms ease-in;
        }
        .form>.btn {
            margin-top: 1.5rem;
        }
        /* btn被点击的时候，进行缩放动画 */
        .btn:active {
            transform: scale(0.8);
        }

# 重点在这里 层叠部分设置

这里设置了层叠部分的整体样式，使他的优先级最高，展示到最上面来遮住空白处，使得显示动画效果

    .container-overlay {
            height: 100%;
            left: 50%;
            /* 隐藏掉超出部分的图画 */
            overflow: hidden;
            position: absolute;
            top: 0;
            transition: transform 0.6s ease-in-out;
            width: 50%;
            /* 优先显示级别最高 遮住空白处，使得显示动画 */
            z-index: 100;
        }
       

** 随后这里设置了层叠部分的父容器，进行相对定位使得后面的元素能够根据这个元素进行定位，注意这里left设置为-100%其目的是向左移动一个父容器的宽度，也就是使其超出父容器的左边缘，达到隐藏的效果。这样一来，即使.overlay容器的宽度是父容器的两倍，只有父容器内部的部分宽度（100%）是可见的，而超出父容器左边缘的部分则被隐藏在父容器外部。通过设置左侧边缘为-100%，可以确保.overlay容器不会默认显示在父容器内部，从而实现初始隐藏的效果。隐藏起来了按钮只显示注册和登录表部分，并且再次引入了背景图，设置平移动画为后续做准备**

  .overlay {
            /* 父容器的 200% 100%  */
            width: 200%;
            height: 100%;
            /* 的定位设置为相对定位，使得后续的定位属性可以生效。 */
            position: relative;
            /* 左边缘定位到父容器的左边缘外，即向左移动一个父容器的宽度。 */
            left: -100%;
            /* 再次引入背景图 */
            background: url("bg.jpg")no-repeat center fixed;
            background-size: cover;
            transition: transform 0.6s ease-in-out;
            transform: translateX(0);
            /* 将 .overlay 进行水平方向平移，当前设置为 translateX(0) 表示不发生平移。 */
        }

接着这里进行了按钮有无账号那一部分的控制，设置为弹性盒，进行水平垂直居中并且改变为y为主轴，添加上了动画为后续做准备，并且设置好了两个按钮的初始位置

    .overlay-panel {
            /* 控制按钮有无账号那一部分 */
            /* 与父元素同高则定位居中 */
            height: 100%;
            width: 50%;
            /* 相对于overlay绝对定位 */
            position: absolute;
            /* 弹性盒子水平垂直居中切变换主轴为y轴 */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* transform: translateX(0); */
            transition: transform 0.6s ease-in-out;
        }
        .overlay-left {
            /* 左边部分,已有账号直接登录,x轴平移-20% */
            transform: translateX(-20%);
        }

        .overlay-right {
            /* 右部分,没有账号按钮 */
            right: -3px;
            transform: translateX(0);
        }

重点重点，搭配js实现。动画设置在这里设置了一个活动样式panel-active，当切换面板的时候触发相应样式的变化，从而实现了页面切换效果的展示，通过改变yransform的值，从而控制各个部分的水平平移的效果，实现平缓过度，将元素由隐藏状态移动到可见位置，并且更改了透明度和堆叠顺序，控制元素的可见性和显示层级 与下面js代码结合在一起形成了一个切面效果 当点击 signInBtn 按钮时，执行的函数会移除 container 元素的 panel-active 类，使得切换面板回到原始状态。当点击 signUpBtn 按钮时，执行的函数会为 container 元素添加 panel-active 类，触发面板的切换效果。当 container 具有 panel-active 类时，.panel-active .overlay-left 的样式规则将使 .overlay-left 元素在水平方向上不发生平移； 同样地，.panel-active .container-overlay 规则将使 .container-overlay 元素向左平移它的宽度的 100%；.panel-active .overlay 规则将使 .overlay 元素向右平移自身宽度的 50%；.panel-active .container-signin 规则将使 .container-signin 元素向右平移自身宽度的 100%；.panel-active .container-signup 规则将使 .container-signup 元素向右平移自身宽度的 100%，并设置其不透明度为 1，堆叠顺序为 5。

至此全部效果完成

/* 重点在这!! 通过添加或移除 panel-active 类，切换面板的状态，触发相应的样式变化，从而实现了页面切换的动画效果。*/
        /*这段代码定义了在应用 .panel-active 类时，不同元素的动画效果。通过改变 transform 属性的值，
        可以控制各个元素的水平平移效果，从而实现动画过渡效果，将元素由隐藏状态移动到可见位置。同时，还改变了透明度和堆叠顺序，以控制元素的可见性和显示层级。*/
        /* 定义了这样一个动画,并且在后面js部分通过点击实现了左右移动,添加样式达到实现动画的情况 */
        /* 与下面js代码结合在一起形成了一个切面效果 当点击 signInBtn 按钮时，执行的函数会移除 container 元素的 panel-active 类，使得切换面板回到原始状态。
        当点击 signUpBtn 按钮时，执行的函数会为 container 元素添加 panel-active 类，触发面板的切换效果。*/
        /* 当 container 具有 panel-active 类时，.panel-active .overlay-left 的样式规则将使 .overlay-left 元素在水平方向上不发生平移；
        同样地，.panel-active .container-overlay 规则将使 .container-overlay 元素向左平移它的宽度的 100%；
        .panel-active .overlay 规则将使 .overlay 元素向右平移自身宽度的 50%；
        .panel-active .container-signin 规则将使 .container-signin 元素向右平移自身宽度的 100%；
        .panel-active .container-signup 规则将使 .container-signup 元素向右平移自身宽度的 100%，并设置其不透明度为 1，堆叠顺序为 5。 */
        .panel-active .overlay-left {
            transform: translateX(0);
        }

        .panel-active .container-overlay {
            transform: translateX(-100%);
        }

        .panel-active .overlay {
            transform: translateX(50%);
        }

        .panel-active .container-signin {
            transform: translateX(100%);
        }

        .panel-active .container-signup {
            opacity: 1;
            z-index: 5;
            transform: translateX(100%);
        }

<script>
    // 段代码为选取的两个按钮绑定了点击事件，并在按钮点击时，通过添加或移除特定的类名（panel-active），
    //来实现容器元素的样式变化效果。当点击 “signIn” 按钮时，移除 panel-active 类，将容器恢复到非活动状态；
    //当点击 “signUp” 按钮时，添加 panel-active 类，将容器变为活动状态。这些类名的添加或移除会触发关联的 CSS 样式规则
    //从而实现相应元素的动画过渡效果。
    const signInBtn = document.querySelector('#signIn');
    const signUpBtn = document.querySelector('#signUp')
    console.log(signUpBtn)
    const container = document.querySelector('.container')
    signInBtn.onclick = function () {
        container.classList.remove('panel-active')
    }
    signUpBtn.onclick = function () {
        container.classList.add('panel-active')
    }
</script>

展示效果

总结

重点在这个使用了叠加显示的效果，完美的运用了z-index，同时使用了js配合按钮达成了平移的效果，使得动画看起来十分流畅可行，并且设置了一个类元素来通过添加和删除来控制效果的展示，等等这些都十分值得我学习，通过本次的学习的上手制作，让我对css有了更近一步的理解。

ps:初学前端，目前才学到vue仅仅是想通过这些记录自己的学习成果并无其他意思，希望大佬们多多支持，手下留情，多多指导，如果有错误的地方还望大佬们能够及时提醒我好纠正