Skip to content

V
VueJS酷炫登录页面

特创数字科技 / VueJS酷炫登录页面
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
VueJS酷炫登录页面
提交 9f4033a0 编写于 作者: W weixin_54226053
浏览文件
操作

Auto Commit

上级 7a093d7e
显示空白变更内容
内联 并排
Showing with 241 addition and 11 deletion
.inscode
浏览文件 @ 9f4033a0
run = "npm i && npm run dev" run = "npm i && npm run dev"
language = "node"
[deployment] [deployment]
build = "npm i && npm run build" build = "npm i && npm run build"
...@@ -8,3 +9,6 @@ run = "npm run preview" ...@@ -8,3 +9,6 @@ run = "npm run preview"
PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}" PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
XDG_CONFIG_HOME = "/root/.config" XDG_CONFIG_HOME = "/root/.config"
npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global" npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
[debugger]
program = "main.js"
index.html
浏览文件 @ 9f4033a0
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8" /> <title>动态酷炫登录页面</title>
<link rel="icon" href="/favicon.ico" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vite App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> <style type="text/css">
<body> body {
<div id="app"></div> background-color: #222;
<script type="module" src="/src/main.js"></script> font-family: "Helvetica Neue", Helvetica, sans-serif;
</body> font-size: 16px;
line-height: 1.5;
color: #fafafa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
padding: 50px 0;
max-width: 500px;
}
.form {
position: relative;
z-index: 1;
background: #282828;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 10px;
display: block;
}
h2 {
font-weight: bold;
font-size: 28px;
margin-bottom: 25px;
color: #fafafa;
}
input[type="text"],
input[type="password"] {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
outline: none;
padding: 15px;
display: block;
width: 87%;
border: none;
border-radius: 5px;
margin: 10px 0;
background-color: #404040;
color: #fafafa;
}
input[type="submit"] {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
outline: none;
background: #6d4c41;
color: #fafafa;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 50%;
margin: 10px 0;
transition: background-color 0.2s ease-out;
}
input[type="submit"]:hover {
background-color: #5c3d31;
}
.form:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: -webkit-linear-gradient(top left, #d9d9d9 0%, #f5f5f5 100%);
background: linear-gradient(to bottom right, #d9d9d9 0%, #f5f5f5 100%);
border-radius: 10px;
}
.form:after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
background-color: #282828;
border-radius: 10px;
box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.1);
filter: blur(0px);
opacity: 0.5;
animation: animateBlur 20s linear infinite;
}
@keyframes animateBlur {
0% {
filter: blur(0px);
}
25% {
filter: blur(5px);
}
50% {
filter: blur(10px);
}
75% {
filter: blur(5px);
}
100% {
filter: blur(0px);
}
}
.social-login {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30px;
}
.social-login a {
position: relative;
display: block;
width: 40px;
height: 40px;
background-color: #fafafa;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-out;
}
.social-login a:hover {
transform: translateY(-5px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.social-login a i {
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #6d4c41;
}
.social-login .facebook {
background-color: #3b5998;
}
.social-login .twitter {
background-color: #1da1f2;
}
.social-login .google {
background-color: #db4a39;
}
#login-form {
display: none;
}
#login-form:checked ~ .form {
display: block;
animation-duration: 0.5s;
animation-name: slideInDown;
animation-fill-mode: both;
}
#login-form:not(:checked) ~ .form {
display: block;
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="login-form">
<label for="login-form" class="logo"></label>
<div class="form">
<h2>动态酷炫登录页面</h2>
<form action="#" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" name="submit" value="登录">
</form>
</div>
</div>
<script type="text/javascript">
function animateBlur() {
var blur = 0;
var blurStep = 1;
var blurMax = 10;
var blurMin = 0;
var blurDir = 1;
var formAfter = document.querySelector('.form:after');
setInterval(function () {
if (blur == blurMax) blurDir = -1;
if (blur == blurMin) blurDir = 1;
blur += blurStep * blurDir;
formAfter.style.filter = 'blur(' + blur + 'px)';
}, 100);
}
animateBlur();
</script>
</body>
</html> </html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或