超级简单 jQuery+JS+HTML+CSS实现的炫酷登录注册界面

创建一个炫酷的登录注册界面可以使用HTML、CSS和JavaScript,而jQuery可以简化DOM操作和事件处理。下面是实现一个基本的登录注册界面的步骤和代码示例:

1. HTML结构

首先,创建一个简单的HTML结构,包括登录和注册的表单:

 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册界面</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>注册</h1> <input type="text" placeholder="用户名" /> <input type="password" placeholder="密码" /> <input type="password" placeholder="确认密码" /> <button>注册</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>登录</h1> <input type="text" placeholder="用户名" /> <input type="password" placeholder="密码" /> <a href="#">忘记密码?</a> <button>登录</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>欢迎回来!</h1> <p>请输入您的账户信息</p> <button class="ghost" id="signIn">登录</button> </div> <div class="overlay-panel overlay-right"> <h1>新用户注册</h1> <p>创建一个新账户</p> <button class="ghost" id="signUp">注册</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="script.js"></script> </body> </html>

2. CSS样式

使用CSS来设计炫酷的界面效果:

 
/* styles.css */ body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; } .container { position: relative; width: 100%; max-width: 600px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .sign-up-container { left: 50%; width: 50%; opacity: 0; z-index: 1; } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .overlay { position: relative; width: 200%; height: 100%; left: -50%; } .overlay-panel { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%; transform: translateX(0); } .overlay-left { transform: translateX(-20%); } .overlay-right { right: 0; transform: translateX(0); } button { background: #ff416c; color: #fff; border: none; padding: 10px 20px; margin: 10px 0; cursor: pointer; } .ghost { background: none; border: 2px solid #ff416c; color: #ff416c; } input[type="text"], input[type="password"] { width: 100%; padding: 15px; margin: 10px 0; border: none; background: #f1f1f1; } a { color: #ff416c; text-decoration: none; } /* 动画效果 */ .container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s; } .container.right-panel-active .sign-in-container { transform: translateX(100%); opacity: 0; z-index: 3; } .container.right-panel-active .overlay-container { transform: translateX(-100%); } @keyframes show { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } }

3. JavaScript和jQuery

使用jQuery来控制界面的切换:

 
// script.js $(document).ready(function(){ $("#signIn").click(function(){ $(".form-container").addClass("right-panel-active"); }); $("#signUp").click(function(){ $(".form-container").removeClass("right-panel-active"); }); });

以上代码提供了一个基础的登录注册界面,包括动画效果和简单的交互。你可以根据自己的需求进一步美化和扩展功能。

posted on 2024-06-17 01:04  WEB前端1989  阅读(24)  评论(0编辑  收藏  举报
高防CDN 百度云加速-百度云防护-百度高防CDN-京东云星盾 站长论坛 网站防护-CDN加速-网站安全-站长论坛