给大家分享一个基于HTML/CSS/JS酷炫的登陆注册表单

演示效果：

在下面，您可以看到我创建的演示：

在这里插入图片描述

一个基于HTML，CSS，JS的登陆注册表单，文章中给出了完整的源码

项目描述

在转到实际代码之前，我想对组件中要包含的内容进行分解。这将有所帮助，因为它将使我们编写的代码更加清晰。

我们在主要组件（.container）中有4个较小的屏幕/框：

• 在登录形式
• 该会员注册表格
• 在登录覆盖
• 该会员注册覆盖

另外，您会在某一时刻看到以下任一情况：

• 在登录形式旁会员注册覆盖
• 该会员注册的形式旁边的登录覆盖

在覆盖面板中，我们有一些文本和button—单击以显示其他屏幕组合，反之亦然。再检查一次以上的GIF，以了解我的意思。

叠加动画-说明

这可能有点棘手，但我会尽力解释，以便您了解其背后的逻辑。

我们的叠加层组件具有以下几层：

overlay-container—这将在特定时间显示可见区域（下面有更多信息）。它拥有width的50%全部容器的宽度。

叠加层-该div的width大小为两倍（200%），因此它占据了主容器的整个宽度。（200%