<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>绝美登录界面手机版！滑动切换效果</title>
</head>
<style>
* {
/* 禁止文本选中 */
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
.wrapper {
width: 100%;
background: linear-gradient(to bottom, #f7c750, #ff6d6d);
background-image: url('file:///D:/img/开门.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
width: 98%;
height: 96%;
display: flex;
flex-direction: column;
/* 设置为列方向 */
position: relative;
border-radius: 8px;
margin: 2% auto;
border: 1px solid rgba(255, 255, 255, 6);
background-image: linear-gradient(to top left,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0));
backdrop-filter: blur(4px);
box-shadow:
inset 4px 4px 3px rgba(255, 255, 255, 0.6),
inset -4px -4px 3px rgba(0, 0, 0, 0.6);
}
.welcome-box {
width: 100%;
height: 50%;
/* 调整高度 */
position: absolute;
/* 保持绝对定位 */
left: 0;
top: 0;
transition: transform 0.5s ease-in-out;
/* 保持过渡效果 */
border: 5px;
border-radius: 8px 8px 0 0;
background-color: #f7c750;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
z-index: 9;
}
.container p,
.container h1 {
color: rgb(255, 255, 255);
}
.welcome-box h1 {
margin-top: 45px;
text-align: center;
letter-spacing: 5px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.welcome-box p {
height: 25px;
line-height: 25px;
text-align: center;
margin: 10px 0;
font-weight: bold;
text-shadow: 2px 2px 2px #100000;
}
.image-container {
width: 100px;
height: 100px;
margin: 10px auto;
border-radius: 50%;
overflow: hidden;
background: rgba(75, 82, 88, 0.9);
/* 使用半透明背景 */
backdrop-filter: blur(5px);
opacity: 0.9;
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
z-index: 99;
}
.image-container img {
width: 100%;
height: 100%;
}
.form-container {
margin: 120px auto;
}
.form-container,
.registration-container {
flex: 1;
height: 100%;
margin: 40px auto;
}
.title-container {
height: 50px;
line-height: 4px;
}
.title-container h1 {
text-align: center;
letter-spacing: 5px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.container input {
width: 60%;
height: 25px;
margin-bottom: 20px;
text-indent: 4px;
border-radius: 3px;
box-shadow: 0px 0px 5px 5px #f7c750;
}
.form-container input[type="password"] {
transform: translateY(20px);
}
.container input:focus {
color: rgb(61, 185, 71);
}
.button-container {
display: flex;
justify-content: center;
}
.form-container .button-container {
margin-top: 45px;
}
.container button {
width: 100px;
height: 30px;
margin: 0 3px;
border: none;
border-radius: 3px;
color: #fff;
background-color: #2196F3;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.register-btn {
background-color: #4CAF50;
}
button:hover {
cursor: pointer;
background-color: aqua;
}
.button-container p {
height: 30px;
line-height: 30px;
padding: 0 10px;
font-size: 14px;
background-color: #f56c6c;
border-radius: 3px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #d3bfbf;
}
button:hover,
.button-container p:hover {
cursor: pointer;
background-color: rgb(251, 16, 16);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.button-container p:active,
button:active {
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.container ::placeholder {
color: rgb(36, 192, 127);
letter-spacing: 25px;
font-size: 15px;
}
#mask {
width: 100%;
background-image: url('file:///D:/img/原神.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
z-index: 99;
padding: 20px;
color: #ffffff;
text-shadow: 1px 1px 1px #100000;
/* 溢出高度滚动条 */
overflow-y: scroll;
}
#mask h1 {
text-align: center;
letter-spacing: 5px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.img-responsive {
width: 200px;
}
.translation p {
display: inline-block;
}
</style>
<body>
<div class="wrapper">
<div class="container">
<div class="welcome-box">
<h1>欢迎</h1>
<p>加入我们！</p>
<div class="image-container">
<img src="file:///D:/img/空.png" alt="正方形图片">
</div>
</div>
<div class="registration-container">
<div class="title-container">
<h1>注册</h1>
</div>
<div class="input-group">
<input type="text" id="reg-username" placeholder="用户名">
<input type="password" id="reg-password" placeholder="密码">
<input type="password" id="reg-confirm-password" placeholder="确认密码">
</div>
<div class="button-container">
<button class="register-btn" onclick="register()">注册</button>
<p onclick="mySwitch()">已有账号？去登录</p>
</div>
</div>
<div class="form-container">
<div class="title-container">
<h1>登录</h1>
</div>
<div class="input-group">
<input type="text" id="login-username" placeholder="用户名">
<input type="password" id="login-password" placeholder="密码">
</div>
<div class="button-container">
<button onclick="login()">登录</button>
<p onclick="mySwitch()">没有账号?去注册</p>
</div>
</div>
</div>
</div>
<div style="display:none" id="mask">
<div style="width: 100%; text-align: center; margin: auto;">
<button onclick="logout()"
style="background-color: #f56c6c; border: none; border-radius: 5px; cursor: pointer; float: right;padding: 0 2px;">
退出登录
</button>
<h1>欢迎来到受保护的页面</h1>
<p>这里是您想要保护的内容。 </p>
<h2>
<div style="user-select: text; color: rgb(255, 250, 250); font-size: 20px; text-align: center;">
<div
style="color: rgb(250, 213, 1);display:inline-block; background-color: rgba(31, 31, 31, 0.5); backdrop-filter: blur(4px); text-align: center; padding: 10px; border-radius: 8px;">
<div>小时候爱吃西红柿</div>
<div>以为会一辈子爱吃</div>
<div>等到长大不爱吃了就是不爱吃了</div>
<div>没有理由，我没有错</div>
<div>西红柿也没有错</div>
<div>错的只是那些自以为是的一辈子</div>
</div>
</div>
<img src="file:///D:/img/我来了.jpg" alt="受保护的图片" class="img-responsive">
<div style="user-select: text;" class="translation">
<p
style="color: #f56c6c; backdrop-filter: blur(4px); background-color: rgba(31, 31, 31, 0.5); padding: 5px; border-radius: 5px;">
十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。</p>
<p
style="color: #f56c6c; backdrop-filter: blur(4px); background-color: rgba(31, 31, 31, 0.5); padding: 5px; border-radius: 5px;">
夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。</p>
<h3 style="color: #67c23a;">译文</h3>
<p
style="color: #e6a23c; backdrop-filter: blur(4px); background-color: rgba(31, 31, 31, 0.5); padding: 5px; border-radius: 5px;">
你我夫妻诀别已经整整十年，强忍不去思念可终究难以忘怀。你的坟墓远在千里之外，没有地方能诉说我心中的悲伤凄凉。即使你我夫妻相逢怕是也认不出我来了，我四处奔波早已是灰尘满面两鬓如霜。
</p>
<p
style="color: #e6a23c; backdrop-filter: blur(4px); background-color: rgba(31, 31, 31, 0.5); padding: 5px; border-radius: 5px;">
昨夜在梦中回到了家乡，看见你正在小室的窗前对镜梳妆。你我二人默默相对无言，只有泪落千行。料想你年年都为我柔肠寸断，在那凄冷的月明之夜，在那长满矮松的山冈上。
</p>
</div>
</h2>
</div>
</div>
<script>
let flag = true;
const users = [
{ username: "admin", password: "admin123" }, // 添加管理员账户
{ username: "2", password: "2" } // 添加管理员测试账户
]; // 存储用户信息的数组
const mySwitch = () => {
if (flag) {
$(".welcome-box").css({
"transform": "translateY(100%)",
"background-color": " #ff6d6d",
"border-radius": "0 0 8px 8px" // 添加边框圆角
}); $("img").attr("src", "file:///D:/img/荧.png");
$("img").css("transform", "scale(1.3)"); // 这个图片返回原大小,添加缩放效果
} else {
$(".welcome-box").css({
"transform": "translateY(0%)",
"background-color": "#f7c750",
"border-radius": "8px 8px 0 0" // 添加圆角效果
});
$("img").attr("src", "file:///D:/img/空.png");
$("img").css("transform", "scale(1)"); // 这个图片返回原大小,添加缩放效果
}
flag = !flag;
}
const register = () => {
const username = document.getElementById("reg-username").value;
const password = document.getElementById("reg-password").value;
const confirmPassword = document.getElementById("reg-confirm-password").value;
// 检查账号和密码是否为空
if (!username || !password) {
alert("账号和密码不能为空！");
return;
}
if (password !== confirmPassword) {
alert("密码不匹配！");
return;
}
// 检查用户名是否已存在
const userExists = users.some(user => user.username === username);
if (userExists) {
alert("用户名已存在，请选择其他用户名！");
return;
}
// 注册用户
users.push({ username, password });
alert("注册成功，请登录！");
mySwitch(); // 切换到登录界面
}
const login = () => {
const username = document.getElementById("login-username").value;
const password = document.getElementById("login-password").value;
// 验证用户信息
const user = users.find(user => user.username === username && user.password === password);
if (user) {
alert("登录成功！");
// 显示受保护的页面
document.getElementById("mask").style.display = "block"; // 显示内容
document.querySelector('.wrapper').style.display = "none"; // 隐藏注册和登录盒子
document.querySelector('.img-responsive').src = "file:///D:/img/我来了.jpg"; // 更新图片路径
} else {
alert("用户名或密码错误！");
}
}
const logout = () => {
document.getElementById("mask").style.display = "none"; // 隐藏受保护的内容
document.querySelector('.wrapper').style.display = "block"; // 显示注册和登录盒子
document.getElementById("login-username").value = ""; // 清空登录用户名输入框
document.getElementById("login-password").value = ""; // 清空登录密码输入框
}
</script>
</body>
</html>
扫一扫
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
