动态滑动登陆框-Html+Css+Js
2024-08-27 17:10:35
动态滑动登陆框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态滑动登陆框</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body> <div class="show-login-btn"><i class="fas fa-arrow-alt-circle-right"></i>Show Login Form</div> <div class="login-box">
<div class="hide-login-btn"><i class="fas fa-times-circle"></i></div>
<form class="login-form" action="index.html" method="post">
<h1>Welcome</h1>
<input class="txtb" type="text" placeholder="Username"/>
<input class="txtb" type="password" placeholder="Password" />
<input class="login-btn" type="submit" value="Login" />
</form>
</div>
<script>
$(".show-login-btn").on("click",function() {
$(".login-box").toggleClass("showed");
});
$(".hide-login-btn").on("click",function() {
$(".login-box").toggleClass("showed");
});
</script>
</body>
</html>
引用了Font Awesome网站字体，需要登陆邮箱才能显示图标。
body {
margin: 0;
padding: 0;
background: #333;
}
.login-box {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background-image: linear-gradient(45deg, #9fbaa8, #F2E205);
transition: 0.4s;
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
.login-form h1 {
font-weight: 400;
margin-top: 0;
}
.txtb {
display: block;
box-sizing: border-box;
width: 240px;
background: #ffffff28;
border: 1px solid white;
padding: 10px 20px;
color: white;
outline: none;
margin: 10px 0;
border-radius: 6px;
text-align: center;
}
.login-btn {
width: 240px;
background: #003F63;
border: 0;
color: white;
padding: 10px;
border-radius: 6px;
cursor: pointer;
}
.hide-login-btn {
color: #000;
position: absolute;
top: 40px;
right: 40px;
cursor: pointer;
font-size: 24px;
opacity: .7;
}
.show-login-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
border: 2px solid;
padding: 10px;
cursor: pointer;
}
.showed {
left: 0;
}
最新文章
- Writing Clean Code 读后感
- header中Content-Disposition的作用
- Scala深入浅出实战经典-----002Scala函数定义、流程控制、异常处理入门实战
- 在线开发工具helper
- ajax实现无刷新上传附件并且显示进度条的实例
- 百度 迷你版 UMeditor富文本编辑器 使用方法
- allow_url_include和allow_url_fopen
- unity3d Human skin real time rendering 真实模拟人皮实时渲染（转）
- sqlserver 空间数据类型
- zip文件解压或压缩
- Zabbix探索：模板中发现规则的使用
- AS3排序
- MsSqlServer bak文件数据导入
- pthread_once()使用（某个时间在整个程序中仅执行一次，不确定是那个线程）
- jQuery Validation让验证变得如此容易(三)
- DCGAN 论文简单解读
- canvas实现画板
- python成长之路二
- c#窗体form的美化
- Django(ORM查询2)