如何在一个网页实现登录/注册表单切换？14分钟带你使用CSS+JS实现炫酷滑动切换效果

VermilionAkiha:
说一下原理，根据 .container.right-panel-active的有无，signup和signin框 进行了 transform: translateX(±100%);的移动；同时也会影响 overlay-left和 overlay-right，不过这两者的动画是反方向的；从x轴20%的位置划入主框内； 为了动画更加平滑，动画帧show 是opacity从0到1；z-index: 也从1增加到了5; ，

【回复】按钮是 translateX(±20%) ,overlay主体界面是translateX(±50%)的偏移量
【回复】【推荐】零基础前端资料合集：cv17785850
【回复】2022全新零基础合集：https://www.bilibili.com/read/cv16665276
九三鸟:
注释很少,讲解没有,源码不直接给[支持]

驼猫骑士:
大佬，来个遍历数据库的表单查询例程呗，自己做的太丑了[笑哭]

【回复】回复 @前端仙人 :好的，谢谢
【回复】回复 @峡谷尿王张大炮 :你加群，找管理 私发你一个
【回复】回复 @前端仙人 :表格，MySQL输入学号查成绩那种的[妙啊]
特斯拉品牌安全:
我感觉这种效果都不难写出来，难的是想出这种切换的效果[辣眼睛]

【回复】回复 @chix_x :如果是自己的个人项目 当然是越炫越好辣 越强悍越好 就像你的孩子一样 全部都是自己决定[doge]
【回复】因为这是ux的工作了[笑哭]一般前端哪会搞这些花里胡哨的，需求能过就谢天谢地了
【回复】对于客户就是简便，为了展示自然要怎么炫怎么来
阿凯怎么不学习了:
emm，为什么不用那个可以实时显示的那个VScode插件?看代码写完了再刷新才出效果，我就等的很急

【回复】回复 @蜡小烛 :插件市场搜就行了
王木木木木木i:
up主，请把gitHub链接甩我脸上，谢谢[doge]

【回复】gitee不香吗，还不用梯子
晚空吖:
我收藏夹里有个差不多的[doge] BV1TJ411J7u6

【回复】呦，那么巧，你这个和我收藏夹的也挺像 https://youtu.be/mUdo6w87rh4
鑫辰V:
刚刚复刻，给兄弟们避避坑 1、直接上git git clone https://gitee.com/haiyongcsdn/sign-up 2、如果你没有注册按钮，看这里 <div class="overlay__panel overlay--right"> <button class="btn" id="signUp">没有账号，点击注册</button> </div> 大概率是你把right写成left

【回复】回复 @鑫辰V : 5、如果中间的图片不贴合，看这里 .overlay {...} 把background-size: cover;改成background-size: 200%;即可
【回复】回复 @鑫辰V : 最后祝大家都可以成功复刻[脱单doge][脱单doge][脱单doge]
【回复】3、js文件地址要写对 <script src="/js/script.js"></script> 可以用../来查找4、无论是form和from，足要你上下文统一即可
超级码农:
最后的那个bug 好像没有解决就直接演示成果了吧?

-七海黄泉-:
提醒一下，js页面最后两行的意思是禁用默认，所以form表单的action才会没反应……顺便说一下up你form的id一直打成from……

【回复】回复 @镇静的尉迟君i :不好意思啊，这么久了早就没了
【回复】想问下你有源码吗 大佬救命 求个源码
寂寞中的杀气:
这个是两张图吗？我以为是透明到主页面的背景的，这样的话背景是随机的话是不是就用不成了这表单？

努力再努力的笨小孩:
为啥代码一样，最后的那个切换实现不了。请高人指教[抱拳]

【回复】注意他的css样式类名，写类名有空格的，不打那个空格就不能实现切换，我看了这个视频不下20遍才看出破绽，我们很容易忽视这个空格 比如：.container.right-panel-active《这里有个空格》.overlay--left{}
alf77:
您好，我学习您的代码后自己复现了一遍，发现没法从注册页面点击转到登录页面，请问这会是什么原因呢

【回复】注意他的css样式类名，写类名有空格的，不打那个空格就不能实现切换，我看了这个视频不下20遍才看出破绽，我们很容易忽视这个空格 比如：.container.right-panel-active《这里有个空格》.overlay--left{}
【回复】回复 @邓帅帅Fyl :大概是在登录和注册界面分别创建两个对象？时间太久我也有些忘了orz
【回复】回复 @轮子滚啊滚 :你现在实现了吗 我跟你一样实现不了
努力的库珀:
为什么我的最后无法实现登录和注册的界面切换[热词系列_问号]

【回复】注意他的css样式类名，写类名有空格的，不打那个空格就不能实现切换，我看了这个视频不下20遍才看出破绽，我们很容易忽视这个空格 比如：.container.right-panel-active《这里有个空格》.overlay--left{}
【回复】回复 @邓帅帅Fyl :为什么打了空格，也没法实现[大哭]
【回复】回复 @邓帅帅Fyl :好的，已经实现
紫殿i:
为什么我用dw打出来在浏览器上不显示两边的结构，也不会跳转