⛳页面展示
![](https://i-blog.csdnimg.cn/blog_migrate/511ef2f2919259ec03379c97c3e6b6a7.gif)
⛳代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in & Sign up</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Main>
<div class="box">
<div class="inner-box">
<!-- 表单 -->
<div class="forms-wrap">
<!-- sign-in -->
<form action="index.html" outocomplexe="false" class="sign-in-form">
<div class="logo">
<img
src="data:image/jpeg;base64,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"
alt="logo">
<h4>前端学习</h4>
</div>
<div class="heading">
<h2>欢迎回来</h2>
<h6>Not registerd yet?</h6>
<a href="#" class="toggle">Sign up</a>
</div>
<!-- 表单 -->
<div class="actual-form">
<div class="input-wrap">
<input type="text" minlength="4" autocomolete="off" required class="input-field" />
<label>Name</label>
</div>
<div class="input-wrap">
<input type="password" autocomplete="off" required class="input-field" />
<label for="padd">Password</label>
</div>
<input type="submit" value="Sign in" class="sign-btn" />
<p class="text">忘记密码?
<a href="#">获取帮助</a>
</p>
</div>
</form>
<!-- sign-up -->
<form action="index.html" outocomplexe="false" class="sign-up-form">
<div class="logo">
<img src="" alt="logo">
<h4>前端学习</h4>
</div>
<div class="heading">
<h2>注册</h2>
<h6>Already have an account?</h6>
<a href="#" class="toggle">Sign in</a>
</div>
<!-- 表单 -->
<div class="actual-form">
<div class="input-wrap">
<input type="email" autocomolete="off" required class="input-field" />
<label>Email</label>
</div>
<div class="input-wrap">
<input type="password" autocomplete="off" required class="input-field" />
<label for="padd">Password</label>
</div>
<input type="submit" value="Sign Up" class="sign-btn" />
<p class="text">注册前,我已经阅读并同意
<a href="#">隐私协议</a>
</p>
</div>
</form>
</div>
<!-- 轮播 -->、
<div class="carousel">
<div class="images-wrapper">
<img
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.j6ZhJs9q-DnUwpfYB26VKgHaHa?w=174&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="" class="image img-1 show">
<img
src="https://tse4-mm.cn.bing.net/th/id/OIP-C.eHtqL4iIilNlomM2dYFOxAHaHa?w=190&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="" class="image img-2">
<img
src="https://tse3-mm.cn.bing.net/th/id/OIP-C.t4poSevHWg8SW418L8XVxgHaFv?w=228&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
alt="" class="image img-3">
</div>
<div class="text-slider">
<div class="text-wrap">
<div class="text-group">
<h2>开始你的学习流程</h2>
<h2>准备创造奇迹吧</h2>
<h2>学习是一切创造力的开始</h2>
</div>
</div>
<div class="bullets">
<span class="active" data-value="1"></span>
<span data-value="2"></span>
<span data-value="3"></span>
</div>
</div>
</div>
</div>
</div>
</Main>
<script src="app.js"></script>
</body>
</html>
CSS
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
width: 100%;
overflow: hidden;
min-height: 100vh;
padding: 2rem;
background-color: #ff8c6b;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 100%;
overflow: hidden;
max-width: 1020px;
height: 640px;
background-color: #FFF;
position: relative;
border-radius: 3.3rem;
box-shadow: 0 60px 40px -30px rgb(0, 0, 0, .27);
}
.inner-box {
position: absolute;
width: calc(100% - 4.1rem);
height: calc(100% - 4.1rem);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.forms-wrap {
position: absolute;
height: 100%;
width: 45%;
left: 0;
top: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
transition: 0.8s ease-in-out;
}
form {
max-width: 260px;
width: 100%;
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
grid-column: 1/2;
grid-row: 1/2;
transition: opacity 0.02s 0.4s;
}
form.sign-up-form {
opacity: 0;
pointer-events: none;
}
.logo {
display: flex;
}
.logo img {
height: 27px;
margin-right: .3rem;
}
.logo h4 {
font-size: 1.1rem;
letter-spacing: -0.5px;
color: #151111;
}
.heading h2 {
font-size: 2.1rem;
font-weight: 600;
color: #151111;
}
.heading h6 {
font-size: 0.75rem;
font-weight: 400;
color: #babababa;
display: inline;
}
.toggle {
color: #151111;
text-decoration: none;
font-size: 0.75rem;
font-weight: 500;
transition: .3s;
}
.toggle:hover {
color: #8371fd
}
.input-wrap {
position: relative;
height: 37px;
margin-bottom: 2rem;
}
.input-field {
position: absolute;
width: 100%;
height: 100%;
background: none;
border: none;
outline: none;
border-bottom: 1px solid #bbb;
padding: 0;
font-size: 0.95rem;
color: #151111;
transition: 0.4s;
}
label {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 0.95rem;
color: #bbb;
pointer-events: none;
transition: 0.4s;
}
.input-field.active {
border-bottom-color: #151111;
}
.input-field.active+label {
font-size: 0.75rem;
top: -2px;
}
.sign-btn {
display: inline-block;
width: 100%;
height: 43px;
background-color: #151111;
color: #FFF;
border: none;
cursor: pointer;
border-radius: 0.8rem;
font-size: 0.8rem;
margin-bottom: 2rem;
transition: 0.3s;
}
.sign-btn:hover {
background-color: #8371fd;
}
.text {
color: #bbb;
font-size: 0.7rem;
}
.text a {
color: #bbb;
transition: 0.3s;
}
.text a:hover {
color: #8371fd;
}
main.sign-up-mode form.sign-in-form {
opacity: 0;
pointer-events: none;
}
main.sign-up-mode form.sign-up-form {
opacity: 1;
pointer-events: all;
}
main.sign-up-mode .forms-wrap {
left: 55%;
}
main.sign-up-mode .carousel {
left: 0%;
}
.carousel {
background-color: #ffe0d2;
border-radius: 2rem;
padding: 2rem;
overflow: hidden;
position: absolute;
height: 100%;
width: 55%;
left: 45%;
top: 0;
background-color: #ffe0d2;
border-radius: 2rem;
display: grid;
transition: 0.8s ease-in-out;
overflow: hidden;
position: relative;
grid-template-rows: auto 1fr;
}
.images-wrapper {
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 1fr;
}
.image {
width: 100%;
height: 400px;
grid-column: 1/2;
grid-row: 1/2;
opacity: 0;
transition: opacity 0.3s, transform 0.5s;
}
.img-1 {
transform: translate(0, -50px);
}
.img-2 {
transform: scale(0.4, 0.5);
}
.img-3 {
transform: scale(0.3) rotate(-20deg);
}
.image.show {
opacity: 1;
transform: none;
}
.text-slider {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.text-wrap {
max-height: 2.2rem;
overflow: hidden;
margin-bottom: 2.5rem;
}
.text-group {
display: flex;
flex-direction: column;
text-align: center;
transform: translateY(0);
transition: 0.5s;
}
.text-group h2 {
line-height: 2.2rem;
font-weight: 600;
font-size: 1.6rem;
}
.bullets {
display: flex;
align-items: center;
justify-content: center;
}
.bullets span {
display: block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.2rem;
background-color: #aaa;
margin: 0 0.25rem;
cursor: pointer;
transition: .3s;
}
.bullets span.active {
width: 1.1rem;
background-color: #151111;
border-radius: 1rem;
}
@media (max-width:850px) {
.box {
height: auto;
max-width: 550px;
overflow: hidden;
}
.inner-box {
position: static;
transform: none;
width: revert;
height: revert;
padding: 2px;
}
.forms-wrap {
position: revert;
width: 100%;
height: 100%;
}
form {
max-width: revert;
padding: 1.5rem 2.5rem 2rem;
transition: transform 0.8s ease-in-out, opacity 0.45s linear;
}
.heading {
margin: 2rem 0;
}
form.sign-up-form {
transform: translateX(100%);
}
main.sign-up-mode form.sign-in-form {
transform: translateX(-100%);
}
main.sign-up-mode form.sign-up-form {
transform: translateX(0%);
}
.carousel {
position: revert;
height: auto;
width: 100%;
padding: 3rem 2rem;
display: flex;
}
.images-wrapper {
display: none;
}
.text-slider {
width: 100%;
}
}
@media (max-width:530px) {
main {
padding: 1rem;
}
.box {
border-radius: 2rem;
}
.inner-box {
padding: 1rem;
}
.carousel {
padding: 1.5rem 1rem;
}
.text-wrap {
margin-bottom: 1rem;
}
.text-group h2 {
font-size: 1.2rem;
}
form {
padding: 1rem 2rem 1.5rem;
}
}
JS
const inputs = document.querySelectorAll('.input-field');
const toggle_btn = document.querySelectorAll('.toggle');
const main = document.querySelector('main');
const bullets = document.querySelectorAll('.bullets span');
const images = document.querySelectorAll('.image');
inputs.forEach(inp => {
inp.addEventListener('focus', () => {
inp.classList.add('active');
})
inp.addEventListener('blur', () => {
if (inp.value != '') return;
inp.classList.remove('active');
})
})
toggle_btn.forEach(btn => {
btn.addEventListener('click', () => {
main.classList.toggle('sign-up-mode')
})
})
function moveSlider() {
let index = this.dataset.value;
let currentImg = document.querySelector(`.img-${index}`);
images.forEach(img => {
img.classList.remove('show');
})
currentImg.classList.add('show')
const textSlider = document.querySelector('.text-group');
textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`
bullets.forEach(bullet => {
bullet.classList.remove('active');
})
this.classList.add('active')
}
bullets.forEach(bullet => {
bullet.addEventListener('click', moveSlider);
})