下面是一个精心设计的登录模块，具有以下特点：
- 响应式设计，适配各种设备
- 柔和的配色方案
- 平滑的动画效果
- 表单验证功能
- 用户体验优化
- 安全考虑
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高级登录系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #4361ee;
--primary-light: #4895ef;
--secondary-color: #3f37c9;
--accent-color: #f72585;
--light-color: #f8f9fa;
--dark-color: #212529;
--success-color: #4cc9f0;
--error-color: #f72585;
--border-radius: 12px;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: var(--dark-color);
}
.login-container {
position: relative;
width: 100%;
max-width: 420px;
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
animation: fadeIn 0.5s ease-out;
transition: var(--transition);
}
.login-header {
background: linear-gradient(to right, var(--primary-color), var(--primary-light));
color: white;
padding: 30px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.login-header h1 {
font-size: 28px;
margin-bottom: 10px;
position: relative;
z-index: 2;
}
.login-header p {
font-size: 14px;
opacity: 0.9;
position: relative;
z-index: 2;
}
.login-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
transform: rotate(30deg);
animation: shine 6s infinite linear;
z-index: 1;
}
.login-form {
padding: 30px;
position: relative;
}
.form-group {
margin-bottom: 25px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--dark-color);
font-size: 14px;
transition: var(--transition);
}
.input-field {
position: relative;
}
.input-field input {
width: 100%;
padding: 14px 15px 14px 45px;
border: 2px solid #e9ecef;
border-radius: var(--border-radius);
font-size: 15px;
transition: var(--transition);
background-color: #f8f9fa;
}
.input-field input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
outline: none;
background-color: white;
}
.input-field i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-color);
font-size: 18px;
}
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 14px;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input {
margin-right: 8px;
accent-color: var(--primary-color);
}
.forgot-password a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.forgot-password a:hover {
color: var(--secondary-color);
text-decoration: underline;
}
.submit-btn {
width: 100%;
padding: 14px;
background: linear-gradient(to right, var(--primary-color), var(--primary-light));
border: none;
border-radius: var(--border-radius);
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}
.submit-btn:hover {
background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
}
.submit-btn:active {
transform: translateY(0);
}
.social-login {
margin-top: 30px;
text-align: center;
}
.social-login p {
position: relative;
margin-bottom: 20px;
color: #6c757d;
font-size: 14px;
}
.social-login p::before,
.social-login p::after {
content: '';
position: absolute;
top: 50%;
width: 30%;
height: 1px;
background-color: #e9ecef;
}
.social-login p::before {
left: 0;
}
.social-login p::after {
right: 0;
}
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.social-icon:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.social-icon.google {
background-color: #db4437;
}
.social-icon.facebook {
background-color: #4267b2;
}
.social-icon.twitter {
background-color: #1da1f2;
}
.register-link {
text-align: center;
margin-top: 25px;
font-size: 14px;
color: #6c757d;
}
.register-link a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.register-link a:hover {
color: var(--secondary-color);
text-decoration: underline;
}
.error-message {
color: var(--error-color);
font-size: 13px;
margin-top: 5px;
display: none;
}
.form-group.error .error-message {
display: block;
}
.form-group.error input {
border-color: var(--error-color);
}
.form-group.success input {
border-color: var(--success-color);
}
.password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #6c757d;
font-size: 18px;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shine {
0% {
transform: rotate(30deg) translate(-30%, -30%);
}
100% {
transform: rotate(30deg) translate(30%, 30%);
}
}
/* Responsive adjustments */
@media (max-width: 480px) {
.login-container {
max-width: 100%;
}
.login-header h1 {
font-size: 24px;
}
.login-form {
padding: 20px;
}
.remember-forgot {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* Loading spinner */
.spinner {
display: none;
width: 24px;
height: 24px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin: 0 auto;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Floating labels effect */
.form-group.floating-label label {
position: absolute;
left: 45px;
top: 14px;
background: white;
padding: 0 5px;
font-size: 15px;
color: #6c757d;
pointer-events: none;
transition: var(--transition);
}
.form-group.floating-label input:focus + label,
.form-group.floating-label input:not(:placeholder-shown) + label {
top: -10px;
left: 40px;
font-size: 12px;
color: var(--primary-color);
background: white;
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<h1>欢迎回来</h1>
<p>登录您的账户继续</p>
</div>
<form class="login-form" id="loginForm">
<div class="form-group floating-label">
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" id="username" placeholder=" " required>
<label for="username">用户名或邮箱</label>
</div>
<div class="error-message" id="username-error">请输入有效的用户名或邮箱</div>
</div>
<div class="form-group floating-label">
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" id="password" placeholder=" " required>
<label for="password">密码</label>
<i class="fas fa-eye password-toggle" id="togglePassword"></i>
</div>
<div class="error-message" id="password-error">密码必须至少8个字符</div>
</div>
<div class="remember-forgot">
<div class="remember-me">
<input type="checkbox" id="remember">
<label for="remember">记住我</label>
</div>
<div class="forgot-password">
<a href="#">忘记密码?</a>
</div>
</div>
<button type="submit" class="submit-btn" id="submitBtn">
<span id="btnText">登录</span>
<div class="spinner" id="spinner"></div>
</button>
<div class="social-login">
<p>或使用社交账号登录</p>
<div class="social-icons">
<div class="social-icon google">
<i class="fab fa-google"></i>
</div>
<div class="social-icon facebook">
<i class="fab fa-facebook-f"></i>
</div>
<div class="social-icon twitter">
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<div class="register-link">
还没有账户? <a href="#">立即注册</a>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const togglePassword = document.getElementById('togglePassword');
const submitBtn = document.getElementById('submitBtn');
const btnText = document.getElementById('btnText');
const spinner = document.getElementById('spinner');
// 密码显示/隐藏切换
togglePassword.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.classList.toggle('fa-eye-slash');
});
// 表单验证
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// 验证用户名
if (usernameInput.value.trim() === '') {
usernameInput.parentElement.parentElement.classList.add('error');
isValid = false;
} else {
usernameInput.parentElement.parentElement.classList.remove('error');
}
// 验证密码
if (passwordInput.value.length < 8) {
passwordInput.parentElement.parentElement.classList.add('error');
isValid = false;
} else {
passwordInput.parentElement.parentElement.classList.remove('error');
}
if (isValid) {
// 模拟登录请求
btnText.style.display = 'none';
spinner.style.display = 'block';
submitBtn.disabled = true;
setTimeout(function() {
spinner.style.display = 'none';
btnText.style.display = 'inline';
submitBtn.disabled = false;
// 这里应该是实际的登录逻辑
alert('登录成功!');
// 重置表单
loginForm.reset();
}, 2000);
}
});
// 输入时实时验证
usernameInput.addEventListener('input', function() {
if (this.value.trim() !== '') {
this.parentElement.parentElement.classList.remove('error');
}
});
passwordInput.addEventListener('input', function() {
if (this.value.length >= 8) {
this.parentElement.parentElement.classList.remove('error');
}
});
// 社交登录按钮点击效果
const socialIcons = document.querySelectorAll('.social-icon');
socialIcons.forEach(icon => {
icon.addEventListener('click', function() {
this.style.transform = 'scale(0.9)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
// 这里应该是实际的社交登录逻辑
alert(`尝试通过 ${this.querySelector('i').className.split('-')[1]} 登录`);
});
});
});
</script>
</body>
</html>功能特点
响应式设计：
- 完美适配各种屏幕尺寸
- 移动设备上的优化布局
视觉设计：
- 柔和的渐变配色方案
- 精美的阴影和圆角效果
- 专业的图标使用
交互体验：
- 浮动标签效果
- 密码显示/隐藏切换
- 表单验证反馈
- 加载动画
- 按钮悬停效果
动画效果：
- 淡入动画
- 按钮点击效果
- 加载旋转动画
- 标题背景光效
安全考虑：
- 密码隐藏默认
- 表单验证
- 防止多次提交
社交登录：
- 多种社交登录选项
- 点击动画效果
这个登录模块既美观又实用，可以直接集成到任何项目中，或作为进一步开发的基础。
需支付 5元 阅读剩余内容
