滑动切换的注册登录页面

本文将会展现一步步实现这个案例的过程： ## 滑动效果如下拥有登录以及注册界面，两个页面之间的转化过渡丝滑 ![slid1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de84731a922d4a568cba417beddfd974~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1386\&h=810\&s=904521\&e=gif\&f=131\&b=f9c4d9) ## Step1 编写HTML代码 ### 新建文件夹Login Page，在文件夹下新增login.html文件并在文件夹下再建立一个images文件夹，里面存有两张图片 image1.png，以及image2.png ```html 滑动切换的注册登录页面 ``` ### 盒子示意图 ![1705659808410.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a95b79d20e647b391f99aff0f53b041~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=562\&h=325\&s=13057\&e=png\&b=ffffff) #### 首先，编写注册，登录盒子 ```html

``` 显示效果： ![1705660092379.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea4c002249e643549779e2c2c598628e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=974\&h=248\&s=11853\&e=png\&b=ffffff) ![1705660546019.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34f93a8eaabb419192399a5164b21c5e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1013\&h=319\&s=28794\&e=png\&b=ff7070) ### 接着，分别编写（注册对应内容页）去登陆&（登录对应内容页）去注册 ```html

...

欢迎来到前端星球

快来开启你的设计旅程吧

已有账号

欢迎来到前端星球

提升你的设计·编程能力

没有账号？

``` 显示效果： ![1705660873688.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e7582dc598a468ba086072de81bac88~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=726\&h=944\&s=140938\&e=png\&b=fffefe) ## Step2 编写CSS代码 ### 创建并引入CSS文件首先在Login Page文件夹下，新建login.css文件在login.html文件中引入: ```html ... ... ``` ### 初始化&编写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; } ``` ![1705661408998.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3468b2a3afe143b7ac4d99bd1d7a028c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=707\&h=654\&s=152828\&e=png\&b=ffffff) 到这一步我们可以看到，整个浏览器窗口，也就是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%; } ``` ![1705662841846.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be6153bd56d54c5b9f665a2d7d4ddee8~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=673\&h=497\&s=49098\&e=png\&b=ffffff) ### 设置hidden ![1705662883249.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33351feb5e81468882ef1e1dc67c9ba3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=679\&h=475\&s=41650\&e=png\&b=facbe4) 可以看到注册表格暂时隐藏了 ### 渲染注册表格盒子&登录表格盒子中的内容 ![1705663348621.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37295477910e4d36b68dd838623eaabb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=697&h=463&s=77529&e=png&b=ffffff) ```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; } ``` ![1705663221798.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ac0b2f68d46494a803dae1454e448a2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=676&h=482&s=42307&e=png&b=facbe4) 到目前为止，我们的登录页面以及注册页面都设置好啦\~ 接下来开始设置内容页啦 ![1705663472569.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89f93e51a44741d58c942091783bff67~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=967&h=655&s=151459&e=png&b=facbe2) ### 去登陆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%; } ``` ![1705663665915.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10b2834043924a83a208a59729df15d9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=672&h=455&s=92116&e=png&b=f9cae3) 设置完位置之后，然后就渲染内容页中的内容。 > 其实到了这一步，大家应该知道大概的滑动思路了吧。其实就是当我左边显示的时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; } ``` ![1705664156153.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/311fb34078744809a069aa06bc3bcc14~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=710&h=490&s=101877&e=png&b=f7c9e6) 好啦现在的效果是这样的！到现在为止，可以看到，我们的css样式都基本上设置好了，但是出现了一个问题，就是本该被表格遮挡住的内容页却显示在了表格上方。我们再修改一下css代码，添加上这一句： ```css .form-box { ... z-index: 2; .... } ``` > z-index 较大的重叠元素会覆盖较小的元素. 将表格盒子的z-index设置为2 使得表格盒子覆盖住内容盒子. ![1705664784015.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19315267e42743ac80b4b7fc6c55d77e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=675&h=455&s=63344&e=png&b=fbcce2) 接下来只要通过javascript来实现平移以及隐藏显示效果即可。 ## Step3 javascript滑动效果由于代码不长，我们直接在login.html文件中编写javascript ```javascript ... ``` 这样就完成啦！ @本案例参考了b站一位作者大大：前端研究院的视频加上自己的想法来实现的\~ 参考来自：[这效果，让甲方爸爸高攀不起【HTML5+CSS3+JS滑动切换的注册登录界面】\_哔哩哔哩\_bilibili](https://www.bilibili.com/video/BV11r4y1Y7mv/?spm_id_from=333.880.my_history.page.click\&vd_source=785873e19b773d6d0ec12932b1af6855) 感兴趣的小伙伴也可以去看看视频的效果