丝滑切换登录和注册页面
作者：互联网
这首登录页面，通过点击中间上方的复选框按钮切换为注册页面（以3D翻转的形式）
放上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录和注册</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
perspective: 888px;
width: 400px;
height: 500px;
position: fixed;
z-index: 999;
top: 100px;
left: calc((100% - 400px) / 2);
display: none;
}
.cover {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 998;
display: none;
}
input[type="checkbox"].switch {
font-size: 30px;
appearance: none;
width: 2.5em;
height: 1em;
background: #0ebeff;
border-radius: 1em;
position: relative;
left: 162px;
cursor: pointer;
outline: none;
transition: all .2s ease-in-out;
}
input[type="checkbox"].switch:checked {
background: rgb(33,219,179);
}
input[type="checkbox"].switch::before {
position: absolute;
content: "";
width: 1em;
height: 1em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
transform: scale(.7);
left: 0;
transition: all .2s ease-in-out;
}
input[type="checkbox"].switch:checked::before {
left: 1.5em;
}
.container {
position: relative;
width: 400px;
height: 400px;
margin-top: 25px;
transform-style: preserve-3d;
transition: all .6s;
}
.signup,
.signon {
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
width: 100%;
height: 100%;
border-radius: 10px;
text-align: center;
font-size: 1.5em;
color: white;
}
.signon p,
.signup p {
margin-top: 40px;
font-family: STCaiyun;
font-size: 1.3em;
font-weight: 900;
}
.signup {
background-color: #0ebeff;
/* transform: translateZ(1px); */
}
.signon {
background-color: rgb(33,219,179);
transform: rotateY(180deg);
}
.inp {
width: 255px;
height: 30px;
margin-top: 30px;
outline: none;
border: none;
color: white;
font-size: .8em;
text-align: center;
border-bottom: 3px solid rgb(255, 255, 255);
background-color: #0ebeff;
}
.inp::-webkit-input-placeholder {
color: white;
}
.signon>.inp {
background-color: rgb(33,219,179);
}
.sub {
margin-top: 50px;
width: 150px;
height: 40px;
font-size: .7em;
background-color: #fff;
border: none;
cursor: pointer;
transition: all .5s;
}
.sub:hover {
border-radius: 50px;
}
.SignUpBtn {
width: 255px;
height: 100px;
font-size: 1.55em;
position: absolute;
top: 200px;
left: 650px;
cursor: pointer;
}
.close {
width: 60px;
height: 50px;
font-size: 1.08em;
position: absolute;
top: 80px;
right: 470px;
border: none;
background-color: #0ebeff;
color: #fff;
transition: all .3s;
cursor: pointer;
}
.close:hover {
border-radius: 100%;
}
.animate {
animation: appear .6s;
}
@keyframes appear {
0% {
transform: translateY(-100px) scale(2);
opacity: 0;
}
100% {
transform: translateY(0px) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" id="check" class="switch">
<span style="position: absolute;left: 100px;font-size: 1.3em;color: #fff;">登录</span>
<span style="position: absolute;right: 100px;font-size: 1.3em;color: #fff;">注册</span>
<div class="container">
<div class="signup">
<p>登 录</p>
<input type="text" class="inp" placeholder="请输入您的账号" style="margin-top: 60px;">
<input type="password" class="inp" placeholder="请输入您的密码">
<input type="submit" class="sub" value="点击登录">
</div>
<div class="signon">
<p>注 册</p>
<input type="text" class="inp" placeholder="请输入您的手机号" style="margin-top: 60px;">
<input type="password" class="inp" placeholder="请设置您的密码">
<input type="submit" class="sub" value="点击注册">
</div>
</div>
</div>
<div class="cover"><button class="close">关闭</button></div>
<button class="SignUpBtn">模拟登录按钮</button>
<script>
const box = document.querySelector('.box')
const check = document.querySelector('#check')
const container = document.querySelector('.container')
const SignUpBtn = document.querySelector('.SignUpBtn')
const cover = document.querySelector('.cover')
const close = document.querySelector('.close')
check.addEventListener('click', () => {
if (check.checked) {
container.style.transform = 'rotateY(180deg)'
close.style.background = 'rgb(33,219,179)'
} else {
container.style.transform = 'rotateY(0deg)'
close.style.background = '#0ebeff'
}
})
SignUpBtn.addEventListener('click', () => {
check.checked = false
container.style.transform = 'rotateY(0deg)'
close.style.background = '#0ebeff'
box.style.display = 'block'
cover.style.display = 'block'
box.classList.toggle('animate')
cover.classList.toggle('animate')
})
cover.addEventListener('click', () => {
box.style.display = 'none'
cover.style.display = 'none'
box.classList.toggle('animate')
cover.classList.toggle('animate')
})
</script>
</body>
</html>
标签：style,丝滑,登录,color,none,height,width,background,页面 来源： https://blog.csdn.net/qq_61935150/article/details/122831031