html+css+js实现登录注册效果
使用html+css+js实现登陆注册效果，美观具有欣赏性。具体效果图及代码如下
·
使用html+css+js实现登陆注册效果，美观具有欣赏性。具体效果图及代码如下:
html代码 ：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Log In Form CSS 2017</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<form class="loginfrom">
<br>
<h1 align="center" style="color: rgba(155, 89, 182, 0.7); ">我心向六便士</h1>
<br>
<h1 align="center" style="color: rgba(155, 89, 182, 0.7); ">欢迎登陆</h1>
<br>
<div>
<input class="loginput" type="text" placeholder="username" required maxlength="7">
<br>
<input class="loginput" type="password" placeholder="Password" name="密码" required maxlength="7">
<br>
<button class="logbutton" > 登 录</button>
</div>
<button class="logbutton" onclick="TurnToRegister()">去注册</button>
</div>
</form>
<form class="regfrom">
<br>
<h1 align="center" style="color: rgba(155, 89, 182, 0.7); ">我心向六便士</h1>
<br>
<h1 align="center" style="color: rgba(155, 89, 182, 0.7); ">欢迎注册</h1>
<br>
<div>
<input class="reginput" type="text" placeholder="username" required maxlength="7">
<br>
<input class="reginput" type="password" placeholder="Password" name="密码" required maxlength="7">
<br>
<input class="reginput" type="password" placeholder="Password" name="密码" required maxlength="7">
<br>
<button class="regbutton" > 注 册</button>
</div>
<button class="regbutton" onclick="TurnToLogin()">去登录</button>
</div>
</form>
<script src="login.js"></script>
</body>
</html>
css代码：
* {
padding: 0;
margin: 0;
}
body {
background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
background-attachment: fixed;
}
.loginfrom{
position: absolute;
left:35%;
top: 15%;
height: 520px;
width: 450px;
border-radius: 5px;
box-shadow: 0 9px 50px hsla(20, 67%, 75%, 0.31);
background-image: linear-gradient(-225deg, #E3FDF5 50%, #FFE6FA 50%);
}
.loginput{
margin-left: 105px;
margin-top: 40px;
width: 240px;
height: 50px;
font-size: 16px;
color: rgba(155, 89, 182, 0.7); ;
outline: none;
border: none;
border-radius: 0px 5px 5px 0px;
}
.loginput:focus::placeholder{
opacity: 0;
}
.logbutton {
color: #372527;
width:150px;
height: 50px;
background: #a8edea ;
border-radius: 5px;
outline: none;
border: none;
cursor: pointer;
text-align: center;
transition: all 0.2s linear;
margin-left: 150px;
margin-top: 40px;
letter-spacing: 0.05em;
}
.logbutton:hover {
transform: translatey(3px);
box-shadow: none;
}
.regfrom{
position: absolute;
left:35%;
top: 15%;
height: 520px;
width: 450px;
border-radius: 5px;
box-shadow: 0 9px 50px hsla(20, 67%, 75%, 0.31);
background-image: linear-gradient(-225deg, #E3FDF5 50%, #FFE6FA 50%);
}
.reginput{
margin-left: 105px;
margin-top: 20px;
width: 240px;
height: 50px;
font-size: 16px;
color: rgba(155, 89, 182, 0.7); ;
outline: none;
border: none;
border-radius: 0px 5px 5px 0px;
}
.reginput:focus::placeholder{
opacity: 0;
}
.regbutton {
color: #372527;
width:150px;
height: 50px;
background: #a8edea ;
border-radius: 5px;
outline: none;
border: none;
cursor: pointer;
text-align: center;
transition: all 0.2s linear;
margin-left: 150px;
margin-top: 25px;
letter-spacing: 0.05em;
}
.regbutton:hover {
transform: translatey(3px);
box-shadow: none;
}
.loginfrom{
display: block;
}
.regfrom{
display: none;
}
javascript代码：
var loginfrom=document.querySelector(".loginfrom") ;
var regfrom=document.querySelector(".regfrom")
function TurnToLogin(){
login();
}
function login(){
loginfrom.style.display = "block";
regfrom.style.display = "none";
}
function TurnToRegister(){
register();
}
function register(){
loginfrom.style.display = "none";
regfrom.style.display = "block";
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)