创建一个现代化、用户友好的登录模块，包含动画效果、响应式设计和清新的配色方案。
<!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>
/* 基础样式与字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
--primary-color: #5a7adb;
--secondary-color: #78c2e8;
--accent-color: #6be5b1;
--bg-color: #f9fbfe;
--text-color: #2c3e50;
--error-color: #e74c3c;
--success-color: #2ecc71;
--box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
--transition-speed: 0.3s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, var(--bg-color), #e6f7ff);
color: var(--text-color);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
position: relative;
overflow: hidden;
}
/* 装饰背景元素 */
.bg-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.bg-shapes div {
position: absolute;
border-radius: 50%;
opacity: 0.1;
}
.shape-1 {
width: 400px;
height: 400px;
background: var(--primary-color);
top: -200px;
left: -200px;
}
.shape-2 {
width: 300px;
height: 300px;
background: var(--secondary-color);
bottom: -100px;
right: -100px;
}
.shape-3 {
width: 200px;
height: 200px;
background: var(--accent-color);
bottom: 20%;
left: 10%;
}
/* 登录容器 */
.login-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
box-shadow: var(--box-shadow);
width: 100%;
max-width: 450px;
padding: 40px;
transform: translateY(0);
opacity: 1;
animation: fadeIn 0.8s ease-out;
position: relative;
overflow: hidden;
}
/* 登录表单 */
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
color: var(--primary-color);
font-weight: 700;
margin-bottom: 10px;
font-size: 2rem;
}
.login-header p {
color: var(--text-color);
opacity: 0.8;
font-size: 0.95rem;
max-width: 300px;
margin: 0 auto;
}
.login-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
position: relative;
}
.form-input {
width: 100%;
padding: 15px 20px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
font-size: 1rem;
color: var(--text-color);
background: transparent;
transition: all var(--transition-speed);
outline: none;
}
.form-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(90, 122, 219, 0.2);
}
.form-label {
position: absolute;
left: 20px;
top: 15px;
font-size: 1rem;
pointer-events: none;
transition: all var(--transition-speed);
color: rgba(44, 62, 80, 0.6);
}
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
top: -12px;
left: 15px;
font-size: 0.85rem;
background-color: white;
padding: 0 8px;
color: var(--primary-color);
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
margin-top: 10px;
}
.remember-me {
display: flex;
align-items: center;
gap: 6px;
}
.custom-checkbox {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
position: relative;
cursor: pointer;
transition: all var(--transition-speed);
}
#remember:checked + .custom-checkbox {
background: var(--primary-color);
border-color: var(--primary-color);
}
#remember:checked + .custom-checkbox::after {
content: '✓';
position: absolute;
color: white;
font-size: 12px;
left: 3px;
top: -2px;
}
#remember {
display: none;
}
.forgot-password {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-speed);
}
.forgot-password:hover {
color: var(--secondary-color);
text-decoration: underline;
}
.btn-login {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 12px;
padding: 15px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-speed);
margin-top: 15px;
overflow: hidden;
position: relative;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(90, 122, 219, 0.3);
}
.btn-login span {
position: relative;
z-index: 1;
}
.btn-login::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.6s;
}
.btn-login:hover::after {
left: 100%;
}
.login-divider {
display: flex;
align-items: center;
margin: 30px 0;
color: rgba(44, 62, 80, 0.5);
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.login-divider span {
padding: 0 15px;
font-size: 0.9rem;
}
.social-login {
display: flex;
justify-content: center;
gap: 15px;
}
.social-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(0, 0, 0, 0.1);
background: white;
cursor: pointer;
transition: all var(--transition-speed);
}
.social-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.social-btn svg {
width: 24px;
height: 24px;
fill: var(--text-color);
}
.social-btn.wechat:hover {
background: #07C160;
border-color: #07C160;
}
.social-btn.wechat:hover svg {
fill: white;
}
.social-btn.qq:hover {
background: #12B7F5;
border-color: #12B7F5;
}
.social-btn.qq:hover svg {
fill: white;
}
.social-btn.weibo:hover {
background: #E6162D;
border-color: #E6162D;
}
.social-btn.weibo:hover svg {
fill: white;
}
.register-link {
text-align: center;
margin-top: 30px;
font-size: 0.95rem;
}
.register-link a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: color var(--transition-speed);
}
.register-link a:hover {
color: var(--secondary-color);
text-decoration: underline;
}
/* 错误消息显示 */
.error-message {
color: var(--error-color);
font-size: 0.85rem;
margin-top: 5px;
display: none;
animation: shake 0.5s;
}
.form-group.error .form-input {
border-color: var(--error-color);
}
.form-group.error .error-message {
display: block;
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
/* 响应式调整 */
@media (max-width: 576px) {
.login-container {
padding: 30px 20px;
border-radius: 12px;
}
.login-header h1 {
font-size: 1.75rem;
}
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
}
</style>
</head>
<body>
<!-- 背景装饰 -->
<div class="bg-shapes">
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="shape-3"></div>
</div>
<div class="login-container">
<div class="login-header">
<h1>欢迎回来</h1>
<p>请登录您的账户以继续访问我们的服务</p>
</div>
<form class="login-form" id="loginForm">
<div class="form-group" id="usernameGroup">
<input type="text" class="form-input" id="username" placeholder=" " autocomplete="username">
<label for="username" class="form-label">用户名/邮箱</label>
<div class="error-message">请输入有效的用户名或邮箱</div>
</div>
<div class="form-group" id="passwordGroup">
<input type="password" class="form-input" id="password" placeholder=" " autocomplete="current-password">
<label for="password" class="form-label">密码</label>
<div class="error-message">密码长度至少为6位</div>
</div>
<div class="form-options">
<div class="remember-me">
<input type="checkbox" id="remember">
<label for="remember" class="custom-checkbox"></label>
<span>记住我</span>
</div>
<a href="#" class="forgot-password">忘记密码?</a>
</div>
<button type="submit" class="btn-login">
<span>登录</span>
</button>
</form>
<div class="login-divider">
<span>或通过以下方式登录</span>
</div>
<div class="social-login">
<button class="social-btn wechat">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 2.344-6.616 2.51-1.89 5.712-1.895 8.26-.013v-.002c0-4.054-3.89-7.342-8.691-7.342zm-1.493 3.99a1.108 1.108 0 1 1 0 2.215 1.108 1.108 0 0 1 0-2.215zm4.887 0a1.108 1.108 0 1 1 0 2.215 1.108 1.108 0 0 1 0-2.215zM24 14.468c0-3.272-3.293-5.944-7.354-5.944-4.061 0-7.354 2.67-7.354 5.944s3.293 5.944 7.354 5.944c.772 0 1.52-.101 2.222-.298a.683.683 0 0 1 .566.076l1.487.87a.238.238 0 0 0 .13.042c.126 0 .227-.103.227-.23 0-.056-.023-.11-.038-.165l-.306-1.154a.46.46 0 0 1 .167-.519C22.952 17.956 24 16.313 24 14.468zm-9.804-.6a.92.92 0 1 1 0-1.84.92.92 0 0 1 0 1.84zm4.19 0a.92.92 0 1 1 0-1.84.92.92 0 0 1 0 1.84z"/>
</svg>
</button>
<button class="social-btn qq">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325 0 1.735-.07 3.33-.314 4.765 1.54-1.31 3.47-3.01 3.092-1.872-.18.535-1.218 2.246-2.036 3.312-.326.426-.19.816.274.945.98.274 3.571.923 2.368 2.56-.908 1.237-3.412 5.295-9.066-.68a7.989 7.989 0 0 1-.878-.788c.285-.536.457-1.245.457-2.307 0-2.21-.756-4.33-1.05-6.448-.215-1.547 2.265-5.74 6.454-6.912 0 0-3.3 5.83 8.97 6.912 1.73.16 3.457.255 5.05.238-1.455-5.296-7.645-7.11-7.032-7.11z"/>
</svg>
</button>
<button class="social-btn weibo">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.716-1.214 1.027-1.852.697-.628-.337-.828-1.186-.439-1.878.379-.683 1.177-1.007 1.808-.682.639.33.85 1.176.483 1.863zm1.313-1.673c-.135.223-.432.328-.663.239-.223-.085-.293-.34-.165-.555.132-.215.419-.32.643-.234.231.081.309.335.18.55h.005zm.094-1.297a4.43 4.43 0 0 0-3.282-3.065c-1.66-.501-3.464.044-4.334 1.35-.903 1.352-.673 3.234.582 4.507 1.34 1.355 3.384 1.836 5.167 1.163 1.738-.656 2.773-2.383 1.865-3.954v-.001zm7.744-3.874a.655.655 0 0 0-.597.533.354.354 0 0 0 .083.263c.115.153.039.393-.145.531-.627.47-1.692.982-2.615-.935 0 0-.719-1.262.129-2.927.42-.825.854-1.132.789-1.392-.063-.237-.943-.048-1.188-.048 0 0-3.107.723-3.773-1.2-.234-.675.129-1.021.271-1.552 0 0-2.535.695-2.415 3.147.049.98 1.211 2.002-.445 3.204 0 0-1.473.84-1.734-1.366-.171-1.452.467-2.65.214-3.2-.255-.551-1.099-.302-1.099-.302-.428.128-1.5.54-1.97 1.35-.351.606-.356 1.446-.356 1.446s-.896.504-.58 1.44c.317.935 1.353.502 1.353.502l.712-.691c.011 1.666.56 2.856 2.57 3.522 3.553 1.175 5.929-.857 7.185-1.55 2.24-1.213 1.56-2.884 1.56-2.884l-1.637.569c-.003 0 2.677-1.45.688-2.415zm1.625-5.39c1.78 0 3.22 1.767 3.22 3.945 0 .775-.196 1.5-.534 2.124l.061-.177-.016.177.016-.177c-.524 1.435-1.557 2.452-1.557 2.452-.366.332-.323.479-.064.568.607.209 1.638-.198 1.638-.198s.2-.14.291-.2c1.79-1.167 2.148-4.06 1.399-6.273-.871-2.585-3.252-2.838-3.876-2.812-.291.012-.493.06-.493.06-.673.115-1.479.46-1.884 1.074-.209.315-.257.536-.257.536-.063.392.445.503.445.503.511.063 1.678-.404 2.609.196zm-1.71.914c.153-.227.268-.227.359-.225.542.013 1.455.248 1.149 2.18-.046.289-.191 1.007-.809 1.312-.119.059-.237.087-.349.093v-.002c-.569.033-1.135-.538-1.135-1.185 0-.653.551-1.839.784-2.173l.001.002v-.002z"/>
</svg>
</button>
</div>
<div class="register-link">
<p>还没有账户? <a href="#">立即注册</a></p>
</div>
</div>
<script>
// 表单验证功能
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
// 验证用户名
if (username === '') {
document.getElementById('usernameGroup').classList.add('error');
isValid = false;
} else {
document.getElementById('usernameGroup').classList.remove('error');
}
// 验证密码
if (password.length < 6) {
document.getElementById('passwordGroup').classList.add('error');
isValid = false;
} else {
document.getElementById('passwordGroup').classList.remove('error');
}
// 如果验证通过，进行登录
if (isValid) {
// 这里添加登录逻辑，例如AJAX请求到服务器
simulateLogin(username, password);
}
});
// 模拟登录请求
function simulateLogin(username, password) {
const btn = document.querySelector('.btn-login');
const originalText = btn.innerHTML;
// 显示加载状态
btn.innerHTML = '<span>登录中...</span>';
btn.disabled = true;
// 模拟网络请求
setTimeout(() => {
// 登录成功后的操作
btn.innerHTML = '<span>登录成功!</span>';
btn.style.background = 'linear-gradient(135deg, var(--success-color), #66d99e)';
// 重定向到主页或其他页面
setTimeout(() => {
alert('登录成功! 即将跳转到主页');
// 实际应用中应该重定向到主页
// window.location.href = '/dashboard';
// 恢复按钮状态 (仅用于演示)
btn.innerHTML = originalText;
btn.disabled = false;
btn.style.background = '';
}, 1000);
}, 1500);
}
// 添加背景动画效果
document.addEventListener('DOMContentLoaded', function() {
const shapes = document.querySelectorAll('.bg-shapes div');
shapes.forEach(shape => {
// 随机初始位置
const randomDelay = Math.random() * 5;
shape.style.animationDelay = `${randomDelay}s`;
// 添加浮动动画
shape.style.animation = `floating 15s ease-in-out ${randomDelay}s infinite`;
});
});
// 浮动动画
document.styleSheets[0].insertRule(`
@keyframes floating {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(5px, 15px) rotate(5deg); }
50% { transform: translate(10px, -10px) rotate(10deg); }
75% { transform: translate(-10px, 5px) rotate(-5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
`, document.styleSheets[0].cssRules.length);
// 密码可见性切换功能也可以添加
// Social login handlers 社交登录处理器也可以添加
</script>
</body>
</html>登录模块特点
现代化设计：
- 使用清新的渐变配色方案，主色调为蓝色和绿色
- 圆角边框和精细的阴影效果
- 流畅的动画和交互效果
响应式布局：
- 适配移动设备和桌面设备
- 在小屏幕上优化显示内容和布局
用户体验优化：
- 浮动标签设计，提供更好的表单填写体验
- 表单验证和错误提示
- 加载状态反馈
动画效果：
- 页面载入动画
- 按钮悬停效果
- 背景形状漂浮动画
- 表单错误提示的抖动动画
社交登录选项：
- 微信、QQ和微博登录
- 交互式图标效果
实用功能：
- 记住我选项
- 忘记密码链接
- 注册新账户链接
- 表单验证
您可以根据实际需求修改颜色、布局和功能，这个设计提供了一个良好的基础，可以进一步定制和扩展。
需支付 5元 阅读剩余内容
