设计一个hmtl、css、JavaScrip的登录注册页面
时间: 2023-10-24 09:05:58 浏览: 33
好的,以下是一个简单的登录注册页面的代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login/Register Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="forms-container">
<div class="signin-signup">
<!-- 登录表单 -->
<form action="#" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username">
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password">
</div>
<input type="submit" value="Login" class="btn solid">
</form>
<!-- 注册表单 -->
<form action="#" class="sign-up-form">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username">
</div>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" placeholder="Email">
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password">
</div>
<input type="submit" class="btn" value="Sign up">
</form>
</div>
</div>
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>New here?</h3>
<p>Sign up to create an account.</p>
<button class="btn transparent" id="sign-up-btn">Sign up</button>
</div>
<img src="img/log.svg" class="image" alt="">
</div>
<div class="panel right-panel">
<div class="content">
<h3>One of us?</h3>
<p>Sign in to your account.</p>
<button class="btn transparent" id="sign-in-btn">Sign in</button>
</div>
<img src="img/register.svg" class="image" alt="">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS代码:
```css
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 100vh;
background-color: #fff;
overflow-x: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
}
.signin-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: transform 0.6s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 1;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.sign-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: #444;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #acacac;
transition: all 0.2s;
font-size: 1.1rem;
}
.input-field input {
background-color: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}
.btn {
display: inline-block;
background-color: #6B7AFF;
color: #fff;
padding: 0.5rem 2.5rem;
font-size: 1.1rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.2s;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
.btn.transparent {
background-color: transparent;
border: 2px solid #6B7AFF;
}
.btn.transparent:hover {
background-color: #6B7AFF;
color: #fff;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
/* background-color: #fff; */
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.image {
width: 100%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 2;
}
.left-panel {
pointer-events: none;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent:hover + span {
transform: translateY(-40px);
}
@media (max-width: 870px) {
.container {
min-height: 800px;
height: auto;
}
.signin-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: none;
}
.sign-in-form,
.sign-up-form {
padding: 0 1.5rem;
}
.image {
width: 70%;
}
.panel {
padding: 0 1.5rem;
text-align: center;
}
.panel .content {
padding: 0.5rem 1rem;
}
.left-panel {
padding: 3rem 12% 2rem 12%;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.right-panel {
padding: 3rem 12% 2rem 12%;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.btn.transparent {
margin: 1.5rem 0;
}
}
```
JavaScript代码:
```javascript
const signUpButton = document.getElementById('sign-up-btn');
const signInButton = document.getElementById('sign-in-btn');
const container = document.querySelector('.container');
signUpButton.addEventListener('click', () => {
container.classList.add('sign-up-mode');
});
signInButton.addEventListener('click', () => {
container.classList.remove('sign-up-mode');
});
```
以上代码实现了一个简单的登录注册页面,包含了两个表单,一个左侧和右侧的面板,通过JavaScript实现了点击按钮切换面板的功能。你可以根据自己的需求对代码进行修改和扩展。