夜雨聆风
效果展示
完整源码
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>登录 - 次元幻境 | Cosplay一站式平台</title><style>:root {--primary-color: #ff0055; /* 活力粉 */--secondary-color: #7000ff; /* 深邃紫 */--accent-color: #00f2ff; /* 科技青 */--bg-dark: #0f0c29;--text-light: #ffffff;--glass-bg: rgba(255, 255, 255, 0.1);--glass-border: rgba(255, 255, 255, 0.2);}* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;}body {background: linear-gradient(135deg, var(--bg-dark), #302b63, #24243e);min-height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;position: relative;}/* 动态背景粒子效果模拟 */.background-fx {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;background-image:radial-gradient(circle at 20% 30%, rgba(112, 0, 255, 0.4) 0%, transparent 50%),radial-gradient(circle at 80% 70%, rgba(255, 0, 85, 0.3) 0%, transparent 50%);animation: pulseBg 10s infinite alternate;}@keyframes pulseBg {0% { transform: scale(1); opacity: 0.8; }100% { transform: scale(1.1); opacity: 1; }}/* 装饰性漂浮元素 */.floating-shape {position: absolute;border-radius: 50%;filter: blur(40px);z-index: 1;animation: float 6s ease-in-out infinite;}.shape-1 { width: 300px; height: 300px; background: var(--secondary-color); top: -50px; left: -100px; }.shape-2 { width: 200px; height: 200px; background: var(--primary-color); bottom: -50px; right: -50px; animation-delay: -3s; }@keyframes float {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }}.login-card {position: relative;z-index: 10;background: var(--glass-bg);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid var(--glass-border);border-radius: 20px;padding: 40px;width: 100%;max-width: 420px;box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);text-align: center;color: var(--text-light);transition: transform 0.3s ease;}.login-card:hover {transform: translateY(-5px);border-color: rgba(255, 255, 255, 0.4);}.logo-area {margin-bottom: 30px;}.logo-icon {font-size: 48px;margin-bottom: 10px;display: inline-block;filter: drop-shadow(0 0 10px var(--primary-color));animation: bounce 2s infinite;}@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-10px); }}h2 {font-size: 28px;font-weight: 700;background: linear-gradient(to right, #fff, var(--accent-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 8px;letter-spacing: 1px;}.subtitle {font-size: 14px;color: rgba(255, 255, 255, 0.7);margin-bottom: 30px;}.input-group {position: relative;margin-bottom: 25px;text-align: left;}.input-group label {position: absolute;top: -10px;left: 15px;background: linear-gradient(135deg, var(--bg-dark), #302b63);padding: 0 5px;font-size: 12px;color: var(--accent-color);border-radius: 4px;transition: all 0.3s;}.input-group input {width: 100%;padding: 15px;background: rgba(0, 0, 0, 0.3);border: 1px solid var(--glass-border);border-radius: 12px;color: #fff;font-size: 16px;outline: none;transition: all 0.3s;}.input-group input:focus {border-color: var(--primary-color);box-shadow: 0 0 15px rgba(255, 0, 85, 0.3);background: rgba(0, 0, 0, 0.5);}.input-group input::placeholder {color: rgba(255, 255, 255, 0.3);}.actions {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;font-size: 13px;}.remember-me {display: flex;align-items: center;cursor: pointer;color: rgba(255, 255, 255, 0.8);}.remember-me input {margin-right: 8px;accent-color: var(--primary-color);cursor: pointer;}.forgot-pw {color: var(--accent-color);text-decoration: none;transition: color 0.3s;}.forgot-pw:hover {color: #fff;text-shadow: 0 0 8px var(--accent-color);}.btn-login {width: 100%;padding: 15px;border: none;border-radius: 12px;background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));color: white;font-size: 18px;font-weight: bold;cursor: pointer;transition: all 0.3s;position: relative;overflow: hidden;box-shadow: 0 10px 20px rgba(112, 0, 255, 0.3);}.btn-login::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);transition: 0.5s;}.btn-login:hover {transform: translateY(-2px);box-shadow: 0 15px 30px rgba(255, 0, 85, 0.4);}.btn-login:hover::before {left: 100%;}.social-login {margin-top: 30px;border-top: 1px solid var(--glass-border);padding-top: 20px;}.social-title {font-size: 12px;color: rgba(255, 255, 255, 0.5);margin-bottom: 15px;position: relative;}.social-title::before, .social-title::after {content: '';position: absolute;top: 50%;width: 30%;height: 1px;background: var(--glass-border);}.social-title::before { left: 0; }.social-title::after { right: 0; }.social-icons {display: flex;justify-content: center;gap: 20px;}.social-btn {width: 45px;height: 45px;border-radius: 50%;background: rgba(255, 255, 255, 0.1);display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s;border: 1px solid transparent;font-size: 20px;}.social-btn:hover {background: rgba(255, 255, 255, 0.2);transform: scale(1.1) rotate(10deg);border-color: var(--accent-color);box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);}.register-link {margin-top: 25px;font-size: 14px;color: rgba(255, 255, 255, 0.8);}.register-link a {color: var(--primary-color);text-decoration: none;font-weight: bold;position: relative;}.register-link a::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: var(--primary-color);transition: width 0.3s;}.register-link a:hover::after {width: 100%;}/* 响应式调整 */@media (max-width: 480px) {.login-card {padding: 30px 20px;margin: 20px;}h2 { font-size: 24px; }}</style><!-- 引入FontAwesome用于图标 (实际项目中建议本地化或按需加载) --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></head><body><divclass="background-fx"></div><divclass="floating-shape shape-1"></div><divclass="floating-shape shape-2"></div><divclass="login-card"><divclass="logo-area"><divclass="logo-icon">🎭</div><h2>次元幻境</h2><pclass="subtitle">Cosplay · 摄影 · 道具 · 社群 一站式平台</p></div><formid="loginForm"><divclass="input-group"><labelfor="username">CN / 邮箱 / 手机号</label><inputtype="text"id="username"placeholder="请输入您的次元代号"required></div><divclass="input-group"><labelfor="password">密码</label><inputtype="password"id="password"placeholder="••••••••"required></div><divclass="actions"><labelclass="remember-me"><inputtype="checkbox"> 记住我</label><ahref="#"class="forgot-pw">忘记密码？</a></div><buttontype="submit"class="btn-login">打破次元壁 <iclass="fas fa-arrow-right"style="margin-left: 8px;"></i></button></form><divclass="social-login"><divclass="social-title">其他方式登录</div><divclass="social-icons"><divclass="social-btn"title="QQ登录"><iclass="fab fa-qq"></i></div><divclass="social-btn"title="微信登录"><iclass="fab fa-weixin"></i></div><divclass="social-btn"title="微博登录"><iclass="fab fa-weibo"></i></div><divclass="social-btn"title="Bilibili登录"><iclass="fab fa-bilibili"style="font-style: normal; font-weight: bold;">B</i></div></div></div><divclass="register-link">还没有账号？<ahref="#">立即注册开启旅程</a></div></div><script>document.getElementById('loginForm').addEventListener('submit', function(e) {e.preventDefault();const btn = document.querySelector('.btn-login');const originalText = btn.innerHTML;// 模拟登录加载效果btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> 穿越中...';btn.style.opacity = '0.8';setTimeout(() => {alert('欢迎回到次元幻境！\n(此处将跳转至用户中心或首页)');btn.innerHTML = originalText;btn.style.opacity = '1';// 实际逻辑：window.location.href = '/dashboard';}, 1500);});// 简单的输入框交互动画增强const inputs = document.querySelectorAll('input');inputs.forEach(input => {input.addEventListener('focus', () => {input.parentElement.querySelector('label').style.color = '#ff0055';});input.addEventListener('blur', () => {if(!input.value) {input.parentElement.querySelector('label').style.color = '#00f2ff';} else {input.parentElement.querySelector('label').style.color = '#fff';}});});</script></body></html>
