245 lines
9.3 KiB
HTML
245 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>可乐 - 活力彩色登录</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
html,body{height:100%}
|
|
body{
|
|
font-family:'Noto Sans SC',system-ui,sans-serif;
|
|
min-height:100vh;
|
|
background:linear-gradient(160deg,#fdf2f8 0%,#fce7f3 25%,#f0abfc20 50%,#dbeafe 75%,#ecfdf5 100%);
|
|
background-size:100% 200%;
|
|
animation:bgShift 8s ease infinite;
|
|
color:#1e1b4b;
|
|
}
|
|
@keyframes bgShift{0%{background-position:0% 0%}50%{background-position:0% 100%}100%{background-position:0% 0%}}
|
|
/* 浮动气泡装饰 */
|
|
.bubble{
|
|
position:fixed;border-radius:50%;opacity:.4;z-index:0;pointer-events:none;
|
|
}
|
|
.bb1{width:200px;height:200px;background:#f9a8d4;top:10%;left:-40px;animation:fb1 12s ease-in-out infinite}
|
|
.bb2{width:160px;height:160px;background:#93c5fd;top:50%;right:-30px;animation:fb2 10s ease-in-out infinite}
|
|
.bb3{width:120px;height:120px;background:#86efac;bottom:15%;left:20%;animation:fb3 9s ease-in-out infinite}
|
|
.bb4{width:80px;height:80px;background:#fde68a;top:25%;right:15%;animation:fb4 11s ease-in-out infinite}
|
|
@keyframes fb1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
|
|
@keyframes fb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-35px)}}
|
|
@keyframes fb3{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-20px)}}
|
|
@keyframes fb4{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,15px)}}
|
|
/* 主卡片 */
|
|
.wrapper{
|
|
position:relative;z-index:1;
|
|
min-height:100vh;display:flex;flex-direction:column;
|
|
align-items:center;justify-content:center;
|
|
padding:32px 24px;
|
|
}
|
|
.card{
|
|
width:100%;max-width:360px;
|
|
background:rgba(255,255,255,0.7);
|
|
backdrop-filter:blur(20px) saturate(1.5);
|
|
-webkit-backdrop-filter:blur(20px) saturate(1.5);
|
|
border:1px solid rgba(255,255,255,0.8);
|
|
border-radius:28px;padding:36px 28px 28px;
|
|
box-shadow:0 8px 40px rgba(0,0,0,0.06);
|
|
animation:popIn .5s cubic-bezier(.22,1,.36,1) both;
|
|
}
|
|
@keyframes popIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:none}}
|
|
/* Logo */
|
|
.top-brand{text-align:center;margin-bottom:28px}
|
|
.top-brand .icon{
|
|
width:64px;height:64px;margin:0 auto 12px;
|
|
background:linear-gradient(135deg,#f472b6,#c084fc,#60a5fa);
|
|
border-radius:20px;display:flex;align-items:center;justify-content:center;
|
|
font-size:32px;
|
|
box-shadow:0 8px 24px rgba(244,114,182,0.3);
|
|
animation:iconBounce 2s ease-in-out infinite;
|
|
}
|
|
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
|
|
.top-brand h1{font-size:22px;font-weight:800;color:#1e1b4b}
|
|
.top-brand p{font-size:12px;color:#a78bfa;margin-top:4px}
|
|
/* 胶囊Tab */
|
|
.capsule-tabs{
|
|
display:inline-flex;margin:0 auto 24px;
|
|
background:rgba(255,255,255,0.6);border-radius:16px;padding:4px;
|
|
display:flex;justify-content:center;
|
|
}
|
|
.cap-tab{
|
|
padding:10px 22px;font-size:14px;font-weight:600;
|
|
color:#a78bfa;background:none;border:none;cursor:pointer;
|
|
border-radius:13px;transition:all .25s;font-family:inherit;
|
|
}
|
|
.cap-tab.on{
|
|
background:linear-gradient(135deg,#f472b6,#c084fc);
|
|
color:#fff;box-shadow:0 4px 16px rgba(244,114,182,0.3);
|
|
}
|
|
/* 彩色输入框 */
|
|
.cfield{
|
|
display:flex;align-items:center;gap:10px;
|
|
padding:13px 16px;border-radius:16px;
|
|
background:rgba(255,255,255,0.6);border:1.5px solid transparent;
|
|
margin-bottom:12px;transition:all .25s;
|
|
}
|
|
.cfield:focus-within{
|
|
border-color:#c084fc;
|
|
background:rgba(255,255,255,0.9);
|
|
box-shadow:0 0 0 4px rgba(192,132,252,0.15);
|
|
}
|
|
.cfield .ci{font-size:17px;flex-shrink:0;opacity:.6}
|
|
.cfield input{
|
|
flex:1;background:none;border:none;outline:none;
|
|
font-size:14px;color:#1e1b4b;font-family:inherit;
|
|
}
|
|
.cfield input::placeholder{color:#c4b5fd}
|
|
.cfield .ctog{
|
|
background:none;border:none;color:#c4b5fd;cursor:pointer;font-size:16px;padding:2px;
|
|
}
|
|
.cfield .csms{
|
|
padding:8px 14px;border-radius:10px;border:none;
|
|
background:linear-gradient(135deg,#f472b6,#a78bfa);color:#fff;
|
|
font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;
|
|
white-space:nowrap;transition:all .2s;flex-shrink:0;
|
|
}
|
|
.cfield .csms:disabled{opacity:.35;cursor:not-allowed}
|
|
/* 忘记密码 */
|
|
.fo{display:flex;justify-content:flex-end;margin:-4px 0 18px}
|
|
.fo a{font-size:12px;color:#a78bfa;text-decoration:none;font-weight:500}
|
|
/* 提交按钮 */
|
|
.cbtn{
|
|
width:100%;padding:15px;border:none;border-radius:16px;
|
|
background:linear-gradient(135deg,#f472b6 0%,#c084fc 50%,#60a5fa 100%);
|
|
color:#fff;font-size:15px;font-weight:700;cursor:pointer;
|
|
font-family:inherit;letter-spacing:.3px;
|
|
box-shadow:0 6px 24px rgba(244,114,182,0.3);
|
|
transition:all .3s;position:relative;overflow:hidden;
|
|
}
|
|
.cbtn:active{transform:scale(.97)}
|
|
.cbtn::after{
|
|
content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
|
|
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
|
|
transition:left .5s;
|
|
}
|
|
.cbtn:active::after{left:100%}
|
|
/* 分隔 */
|
|
.cdiv{display:flex;align-items:center;gap:14px;margin:22px 0}
|
|
.cdiv::before,.cdiv::after{content:'';flex:1;height:1px;background:rgba(0,0,0,0.06)}
|
|
.cdiv span{font-size:11px;color:#c4b5fd}
|
|
/* 社交 */
|
|
.csrow{display:flex;justify-content:center;gap:12px}
|
|
.csb{
|
|
width:52px;height:52px;border-radius:16px;border:1.5px solid rgba(192,132,252,0.2);
|
|
background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;
|
|
cursor:pointer;transition:all .25s;font-size:22px;
|
|
}
|
|
.csb:active{transform:scale(.9);border-color:#c084fc}
|
|
/* 底部文字 */
|
|
.bottom-cta{
|
|
text-align:center;margin-top:22px;font-size:13px;color:#a78bfa;
|
|
}
|
|
.bottom-cta a{color:#c084fc;text-decoration:none;font-weight:600}
|
|
.cagree{
|
|
text-align:center;margin-top:14px;font-size:11px;color:#c4b5fd;line-height:1.6;
|
|
}
|
|
.cagree a{color:#a78bfa;text-decoration:none}
|
|
/* 移动端表单内容动画 */
|
|
.cform{display:none}
|
|
.cform.on{display:block;animation:cfadeIn .3s ease}
|
|
@keyframes cfadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="bubble bb1"></div>
|
|
<div class="bubble bb2"></div>
|
|
<div class="bubble bb3"></div>
|
|
<div class="bubble bb4"></div>
|
|
|
|
<div class="wrapper">
|
|
<div class="card">
|
|
<div class="top-brand">
|
|
<div class="icon">🥤</div>
|
|
<h1>可乐</h1>
|
|
<p>ChunYu · 青春无限</p>
|
|
</div>
|
|
|
|
<div class="capsule-tabs">
|
|
<button class="cap-tab on" onclick="cw('login')">登录</button>
|
|
<button class="cap-tab" onclick="cw('reg')">注册</button>
|
|
</div>
|
|
|
|
<!-- 登录 -->
|
|
<form class="cform on" id="cfLogin" onsubmit="return false">
|
|
<div class="cfield">
|
|
<span class="ci">👤</span>
|
|
<input type="text" placeholder="手机号 / 邮箱" autofocus>
|
|
</div>
|
|
<div class="cfield">
|
|
<span class="ci">🔒</span>
|
|
<input type="password" id="cp1" placeholder="密码">
|
|
<button type="button" class="ctog" onclick="ce('cp1',this)">👁</button>
|
|
</div>
|
|
<div class="fo"><a href="#">忘记密码？</a></div>
|
|
<button class="cbtn" type="submit">登 录</button>
|
|
</form>
|
|
|
|
<!-- 注册 -->
|
|
<form class="cform" id="cfReg" onsubmit="return false">
|
|
<div class="cfield">
|
|
<span class="ci">📱</span>
|
|
<input type="tel" placeholder="手机号">
|
|
</div>
|
|
<div class="cfield">
|
|
<span class="ci">🔑</span>
|
|
<input type="text" placeholder="验证码" maxlength="6">
|
|
<button type="button" class="csms" onclick="cc(this)">发送验证码</button>
|
|
</div>
|
|
<div class="cfield">
|
|
<span class="ci">✏️</span>
|
|
<input type="text" placeholder="设置昵称">
|
|
</div>
|
|
<div class="cfield">
|
|
<span class="ci">🔒</span>
|
|
<input type="password" id="cp2" placeholder="密码（至少6位）">
|
|
<button type="button" class="ctog" onclick="ce('cp2',this)">👁</button>
|
|
</div>
|
|
<div class="cagree">
|
|
<input type="checkbox" checked style="accent-color:#c084fc;width:13px;height:13px;vertical-align:middle;margin-right:4px">
|
|
注册即同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
|
|
</div>
|
|
<button class="cbtn" type="submit" style="margin-top:14px">注 册</button>
|
|
</form>
|
|
|
|
<div class="cdiv"><span>其他登录</span></div>
|
|
<div class="csrow">
|
|
<div class="csb" title="微信">💬</div>
|
|
<div class="csb" title="QQ">🐧</div>
|
|
<div class="csb" title="微博">🔴</div>
|
|
</div>
|
|
<div class="bottom-cta">
|
|
遇到问题？<a href="#">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function cw(t){
|
|
document.querySelectorAll('.cap-tab').forEach((b,i)=>b.classList.toggle('on',t==='login'?i===0:i===1))
|
|
document.getElementById('cfLogin').classList.toggle('on',t==='login')
|
|
document.getElementById('cfReg').classList.toggle('on',t==='reg')
|
|
}
|
|
function ce(id,btn){
|
|
const i=document.getElementById(id)
|
|
i.type=i.type==='password'?'text':'password'
|
|
btn.textContent=i.type==='password'?'👁':'🙈'
|
|
}
|
|
function cc(btn){
|
|
let s=60;btn.disabled=true
|
|
const f=()=>{btn.textContent=s+'s';if(--s<0){btn.disabled=false;btn.textContent='发送验证码'}}
|
|
f();setInterval(f,1000)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|