<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理系统登录</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
animation: gradient 15s ease infinite;
overflow: hidden;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: float 10s infinite;
}
@keyframes float {
0% { transform: translateY(0) translateX(0); opacity: 0; }
50% { opacity: 0.8; }
100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}
.login-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
width: 400px;
padding: 40px;
position: relative;
z-index: 2;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
transform: translateZ(0);
transition: all 0.3s ease;
}
.login-container:hover {
transform: scale(1.01) translateZ(0);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
color: #333;
font-size: 28px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: 1px;
}
.login-header p {
color: #666;
font-size: 16px;
}
.input-group {
position: relative;
margin-bottom: 25px;
}
.input-group label {
position: absolute;
top: 10px;
left: 15px;
color: #999;
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
}
.input-group input {
width: 100%;
padding: 12px 15px;
font-size: 16px;
border: none;
border-bottom: 2px solid #ddd;
background-color: transparent;
outline: none;
transition: all 0.3s ease;
}
.input-group input:focus,
.input-group input:valid {
border-bottom-color: #1a237e;
}
.input-group input:focus + label,
.input-group input:valid + label {
top: -10px;
left: 0;
font-size: 12px;
color: #1a237e;
}
.remember-me {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.remember-me input {
margin-right: 10px;
}
.login-btn {
width: 100%;
padding: 15px;
background: linear-gradient(to right, #1a237e, #3949ab);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.login-btn:hover {
background: linear-gradient(to right, #0d1642, #1a237e);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
.login-btn:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.login-footer {
text-align: center;
margin-top: 30px;
}
.login-footer a {
color: #3949ab;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.login-footer a:hover {
color: #1a237e;
text-decoration: underline;
}
/* 响应式设计 */
@media (max-width: 480px) {
.login-container {
width: 90%;
padding: 30px;
}
}
</style>
</head>
<body>
<!-- 粒子背景效果 -->
<div class="particles" id="particles"></div>
<div class="login-container">
<div class="login-header">
<h1>企业管理系统</h1>
<p>欢迎回来，请登录您的账户</p>
</div>
<form>
<div class="input-group">
<input type="text" id="username" required>
<label for="username">用户名</label>
</div>
<div class="input-group">
<input type="password" id="password" required>
<label for="password">密码</label>
</div>
<div class="remember-me">
<input type="checkbox" id="remember">
<label for="remember">记住我</label>
</div>
<button type="submit" class="login-btn">登 录</button>
</form>
<div class="login-footer">
<a href="#">忘记密码?</a>
</div>
</div>
<script>
// 创建粒子背景效果
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机大小
const size = Math.random() * 5 + 2;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
// 随机位置
particle.style.left = Math.random() * 100 + 'vw';
particle.style.top = Math.random() * 100 + 'vh';
// 随机动画延迟
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.animationDuration = Math.random() * 20 + 10 + 's';
particlesContainer.appendChild(particle);
}
}
// 页面加载完成后创建粒子
window.onload = function() {
createParticles();
// 表单动画效果
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
if (input.value !== '') {
input.nextElementSibling.classList.add('active');
}
});
};
</script>
</body>
</html>
这个登录页面设计具有以下特点：
- 渐变动态背景：使用了蓝红黄三色渐变，并添加了动画效果，显得大气而专业
- 粒子效果：背景中有浮动的粒子元素，增添视觉层次感和动态美感
- 毛玻璃效果：登录框采用半透明设计，具有现代感
- 精美动效：输入框标签浮动效果、按钮悬停效果等细节处理
- 响应式设计：适配不同尺寸的屏幕
这个设计既有视觉上的"大气"感，又保持了专业性和易用性，适合作为企业后台管理系统的登录页面。您可以根据需要调整颜色方案或添加公司logo等元素。
需支付 5元 阅读剩余内容
