基于html+css+js实现的登录注册静态网页

基于html+css+js实现的登录注册静态网页
添加了登录注册的丝滑切换，

页面出现的效果，

动态背景，

纯css的响应式布局

效果图展示：登录

效果图展示：注册

html部分代码：
`

<div class="container">
    <div class="forms-container">
        <div class="forms-wrapper">
            <!-- 登录表单 -->
            <form class="login-form">
                <h2>用户登录</h2>
                <div class="form-group">
                    <input type="text" id="login-username" required>
                    <label for="login-username">用户名</label>
                </div>
                <div class="form-group">
                    <input type="password" id="login-password" required>
                    <label for="login-password">密码</label>
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox"> 记住我
                    </label>
                    <a href="#">忘记密码？</a>
                </div>
                <button type="submit">登录</button>
            </form>

            <!-- 注册表单 -->
            <form class="register-form">
                <h2>用户注册</h2>
                <div class="form-group">
                    <input type="text" id="register-username" required>
                    <label for="register-username">用户名</label>
                </div>
                <div class="form-group">
                    <input type="email" id="register-email" required>
                    <label for="register-email">电子邮箱</label>
                </div>
                <div class="form-group">
                    <input type="password" id="register-password" required>
                    <label for="register-password">密码</label>
                </div>
                <div class="form-group">
                    <input type="password" id="register-confirm" required>
                    <label for="register-confirm">确认密码</label>
                </div>
                <button type="submit">注册</button>
            </form>
        </div>
    </div>

    <!-- 切换面板 -->
    <div class="toggle-container">
        <div class="toggle-panel toggle-left">
            <h3>已有账号？</h3>
            <p>请使用您的账号登录以访问所有功能</p>
            <button class="toggle-btn" id="login-toggle">去登录</button>
        </div>
        <div class="toggle-panel toggle-right">
            <h3>首次使用？</h3>
            <p>立即注册账号，体验更多精彩功能</p>
            <button class="toggle-btn" id="register-toggle">去注册</button>
        </div>
    </div>
</div>
<script src="js/main.js"></script>

`

链接源码压缩包：
复制链接:https://pan.baidu.com/s/1QU9Bqjr-WF-JPwXdl6ahrg?pwd=dl51 提取码:dl51