411 lines
19 KiB
HTML
411 lines
19 KiB
HTML
<!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 href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
|
|
:root {
|
|
--glass: rgba(255,255,255,0.55);
|
|
--glass-hv: rgba(255,255,255,0.72);
|
|
--glass-bd: rgba(255,255,255,0.85);
|
|
--border: rgba(255,255,255,0.7);
|
|
--shadow: rgba(100,120,180,0.12);
|
|
--blur: 20px;
|
|
--t1: #1a1f3a;
|
|
--t2: #4a5480;
|
|
--t3: #8a93b8;
|
|
--accent: #4361ee;
|
|
--accent2: #e85d88;
|
|
--accent3: #06b6a4;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
font-family: 'Noto Sans SC', sans-serif;
|
|
font-weight: 300;
|
|
background: #e8eef8;
|
|
overflow-x: hidden;
|
|
color: var(--t1);
|
|
}
|
|
|
|
.bg {
|
|
position: fixed; inset: 0; z-index: 0;
|
|
background:
|
|
radial-gradient(ellipse 70% 55% at 15% 20%, rgba(180,200,255,0.7) 0%, transparent 55%),
|
|
radial-gradient(ellipse 55% 45% at 85% 75%, rgba(255,180,220,0.55) 0%, transparent 55%),
|
|
radial-gradient(ellipse 50% 40% at 60% 5%, rgba(160,240,220,0.5) 0%, transparent 50%),
|
|
radial-gradient(ellipse 45% 40% at 90% 20%, rgba(255,220,160,0.45) 0%, transparent 50%),
|
|
radial-gradient(ellipse 40% 35% at 5% 85%, rgba(200,180,255,0.45) 0%, transparent 50%),
|
|
linear-gradient(145deg, #dce8f8 0%, #eef3fc 40%, #f0eaf8 70%, #fce8ef 100%);
|
|
}
|
|
|
|
.orb { position:fixed; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; animation:drift 14s ease-in-out infinite; }
|
|
.orb-1 { width:480px;height:480px; top:-120px;left:-80px; background:rgba(150,180,255,0.35); animation-delay:0s; }
|
|
.orb-2 { width:380px;height:380px; bottom:-80px;right:-60px; background:rgba(255,150,200,0.3); animation-delay:-5s; }
|
|
.orb-3 { width:320px;height:320px; top:35%;left:55%; background:rgba(100,220,200,0.25); animation-delay:-9s; }
|
|
.orb-4 { width:260px;height:260px; top:10%;right:5%; background:rgba(255,220,130,0.3); animation-delay:-3s; }
|
|
|
|
@keyframes drift {
|
|
0%,100%{ transform:translate(0,0) scale(1); }
|
|
33%{ transform:translate(25px,-18px) scale(1.04); }
|
|
66%{ transform:translate(-18px,12px) scale(0.97); }
|
|
}
|
|
|
|
.glass {
|
|
background: var(--glass);
|
|
backdrop-filter: blur(var(--blur));
|
|
-webkit-backdrop-filter: blur(var(--blur));
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 8px 32px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
|
|
}
|
|
.glass-deep {
|
|
background: rgba(255,255,255,0.45);
|
|
backdrop-filter: blur(28px);
|
|
-webkit-backdrop-filter: blur(28px);
|
|
border: 1px solid rgba(255,255,255,0.75);
|
|
box-shadow: 0 12px 40px rgba(80,100,160,0.1), inset 0 1px 0 rgba(255,255,255,0.95);
|
|
}
|
|
|
|
.page { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:60px 32px; }
|
|
|
|
.nav {
|
|
position:fixed; top:0; left:0; right:0; z-index:100;
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
padding: 0 48px; height:64px;
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border-bottom: 1px solid rgba(255,255,255,0.7);
|
|
box-shadow: 0 1px 20px rgba(100,120,200,0.08);
|
|
}
|
|
.nav-logo {
|
|
font-family:'Noto Serif SC',serif; font-size:18px; font-weight:600;
|
|
color:var(--accent); letter-spacing:0.05em;
|
|
}
|
|
.nav-links { display:flex; gap:36px; }
|
|
.nav-links a { font-size:13px; color:var(--t2); text-decoration:none; letter-spacing:0.06em; transition:color 0.2s; cursor:pointer; }
|
|
.nav-links a:hover { color:var(--accent); }
|
|
.nav-btn {
|
|
font-size:12px; color:#fff;
|
|
background: var(--accent);
|
|
border:none; border-radius:20px;
|
|
padding:8px 22px; cursor:pointer;
|
|
letter-spacing:0.06em;
|
|
box-shadow: 0 4px 14px rgba(67,97,238,0.3);
|
|
transition: box-shadow 0.2s, transform 0.15s;
|
|
}
|
|
.nav-btn:hover { box-shadow:0 6px 20px rgba(67,97,238,0.4); transform:translateY(-1px); }
|
|
|
|
.hero { padding:140px 0 70px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
|
|
|
|
.eyebrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
|
|
.hero h1 { font-family:'Noto Serif SC',serif; font-size:50px; font-weight:300; line-height:1.2; color:var(--t1); margin-bottom:18px; }
|
|
.hero h1 em { font-style:normal; color:var(--accent); font-weight:600; }
|
|
.hero p { font-size:15px; line-height:1.85; color:var(--t2); margin-bottom:34px; max-width:420px; }
|
|
.hero-actions { display:flex; gap:16px; align-items:center; }
|
|
|
|
.btn-primary {
|
|
padding:12px 30px;
|
|
background:var(--accent); color:#fff;
|
|
border:none; border-radius:28px; font-size:13px; letter-spacing:0.06em; cursor:pointer;
|
|
box-shadow:0 6px 20px rgba(67,97,238,0.3);
|
|
transition:all 0.22s;
|
|
}
|
|
.btn-primary:hover { box-shadow:0 8px 28px rgba(67,97,238,0.4); transform:translateY(-2px); }
|
|
.btn-ghost { padding:12px 22px; color:var(--t2); font-size:13px; letter-spacing:0.06em; cursor:pointer; transition:color 0.2s; }
|
|
.btn-ghost:hover { color:var(--accent); }
|
|
|
|
.hero-card { border-radius:24px; padding:32px; position:relative; overflow:hidden; }
|
|
.hero-card::before {
|
|
content:''; position:absolute; top:-1px;left:-1px;right:-1px; height:1px;
|
|
background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent);
|
|
}
|
|
|
|
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
|
|
.card-label { font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--t3); }
|
|
.card-badge {
|
|
font-size:11px; padding:4px 12px; border-radius:12px;
|
|
background:rgba(6,182,164,0.1); border:1px solid rgba(6,182,164,0.25);
|
|
color:#0a8c7a; letter-spacing:0.05em;
|
|
}
|
|
|
|
.big-number { font-family:'Noto Serif SC',serif; font-size:52px; font-weight:300; color:var(--t1); line-height:1; margin-bottom:6px; }
|
|
.big-number span { font-size:18px; color:var(--t2); font-family:'Noto Sans SC',sans-serif; }
|
|
|
|
.mini-chart { display:flex; align-items:flex-end; gap:4px; height:48px; margin:18px 0; }
|
|
.bar { flex:1; border-radius:3px 3px 0 0; background:rgba(67,97,238,0.18); transition:background 0.2s; animation:barGrow 0.7s ease-out both; }
|
|
.bar:hover { background:rgba(67,97,238,0.4); }
|
|
.bar.hi { background:rgba(67,97,238,0.5); }
|
|
@keyframes barGrow { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1);transform-origin:bottom} }
|
|
.bar:nth-child(1){height:45%;animation-delay:.05s} .bar:nth-child(2){height:62%;animation-delay:.1s}
|
|
.bar:nth-child(3){height:50%;animation-delay:.15s} .bar:nth-child(4){height:78%;animation-delay:.2s}
|
|
.bar:nth-child(5){height:58%;animation-delay:.25s} .bar:nth-child(6){height:88%;animation-delay:.3s}
|
|
.bar:nth-child(7){height:68%;animation-delay:.35s} .bar:nth-child(8){height:55%;animation-delay:.4s}
|
|
.bar:nth-child(9){height:82%;animation-delay:.45s} .bar:nth-child(10){height:72%;animation-delay:.5s}
|
|
|
|
.card-row { display:flex; justify-content:space-between; font-size:12px; color:var(--t3); margin-top:4px; }
|
|
|
|
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:60px; }
|
|
.stat-card { border-radius:18px; padding:24px; text-align:center; transition:transform 0.25s; cursor:default; }
|
|
.stat-card:hover { transform:translateY(-4px); }
|
|
.stat-icon { width:40px;height:40px; border-radius:12px; display:flex;align-items:center;justify-content:center; font-size:20px; margin:0 auto 14px; }
|
|
.stat-value { font-size:28px; font-weight:500; color:var(--t1); line-height:1; margin-bottom:6px; }
|
|
.stat-label { font-size:12px; color:var(--t3); letter-spacing:0.06em; }
|
|
|
|
.section-title { font-family:'Noto Serif SC',serif; font-size:30px; font-weight:300; color:var(--t1); margin-bottom:10px; }
|
|
.section-sub { font-size:14px; color:var(--t2); margin-bottom:36px; line-height:1.75; }
|
|
|
|
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:60px; }
|
|
.feature-card { border-radius:20px; padding:26px; transition:transform 0.25s; cursor:default; }
|
|
.feature-card:hover { transform:translateY(-3px); }
|
|
.feature-icon {
|
|
width:44px;height:44px; border-radius:14px;
|
|
background:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.8);
|
|
display:flex;align-items:center;justify-content:center; font-size:22px; margin-bottom:16px;
|
|
}
|
|
.feature-title { font-size:15px; font-weight:500; color:var(--t1); margin-bottom:9px; }
|
|
.feature-desc { font-size:13px; color:var(--t2); line-height:1.75; }
|
|
|
|
.bottom-row { display:grid; grid-template-columns:1fr 1.2fr; gap:22px; margin-bottom:60px; }
|
|
|
|
.user-list { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
|
|
.user-item {
|
|
display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px;
|
|
background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.65);
|
|
cursor:default; transition:background 0.2s;
|
|
}
|
|
.user-item:hover { background:rgba(255,255,255,0.65); }
|
|
.avatar { width:36px;height:36px; border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:500; flex-shrink:0; }
|
|
.user-name { font-size:13px; color:var(--t1); font-weight:400; }
|
|
.user-role { font-size:11px; color:var(--t3); margin-top:2px; }
|
|
.user-status { margin-left:auto; width:7px;height:7px; border-radius:50%; }
|
|
.online { background:#10b981; box-shadow:0 0 6px rgba(16,185,129,0.5); }
|
|
.away { background:#f59e0b; }
|
|
.offline { background:#cbd5e1; }
|
|
|
|
.activity-feed { display:flex; flex-direction:column; margin-top:18px; }
|
|
.activity-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(100,120,200,0.08); }
|
|
.activity-item:last-child { border-bottom:none; }
|
|
.activity-dot { width:8px;height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
|
|
.activity-text { font-size:13px; color:var(--t2); line-height:1.65; }
|
|
.activity-text strong { color:var(--t1); font-weight:500; }
|
|
.activity-time { font-size:11px; color:var(--t3); margin-top:3px; }
|
|
|
|
.tag {
|
|
display:inline-block; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
|
|
padding:3px 10px; border-radius:8px;
|
|
background:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.75);
|
|
color:var(--t2); margin-right:6px; margin-bottom:8px;
|
|
}
|
|
|
|
.footer { border-top:1px solid rgba(100,120,200,0.1); padding:30px 0; display:flex; justify-content:space-between; align-items:center; }
|
|
.footer-copy { font-size:12px; color:var(--t3); }
|
|
.footer-links { display:flex; gap:28px; }
|
|
.footer-links a { font-size:12px; color:var(--t3); text-decoration:none; transition:color 0.2s; }
|
|
.footer-links a:hover { color:var(--accent); }
|
|
|
|
.pill {
|
|
display:inline-flex; align-items:center; gap:6px;
|
|
font-size:11px; padding:5px 14px; border-radius:20px; font-weight:400;
|
|
background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.75); color:var(--t2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg"></div>
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
<div class="orb orb-4"></div>
|
|
|
|
<nav class="nav">
|
|
<div class="nav-logo">琉光</div>
|
|
<div class="nav-links">
|
|
<a>产品</a><a>设计</a><a>文档</a><a>关于</a>
|
|
</div>
|
|
<button class="nav-btn">开始体验</button>
|
|
</nav>
|
|
|
|
<div class="page">
|
|
|
|
<section class="hero">
|
|
<div>
|
|
<p class="eyebrow">下一代设计语言</p>
|
|
<h1>光与<em>玻璃</em><br>的艺术</h1>
|
|
<p>毛玻璃设计将透明、光泽与柔和色彩融为一体，在明亮的底色上营造出如薄冰般的清透层次感。</p>
|
|
<div class="hero-actions">
|
|
<button class="btn-primary">探索设计</button>
|
|
<button class="btn-ghost">查看文档 →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-card glass-deep">
|
|
<div class="card-header">
|
|
<span class="card-label">本月收益</span>
|
|
<span class="card-badge">↑ 12.4%</span>
|
|
</div>
|
|
<div class="big-number">¥84,231 <span>元</span></div>
|
|
<div class="mini-chart">
|
|
<div class="bar"></div><div class="bar"></div><div class="bar"></div>
|
|
<div class="bar"></div><div class="bar"></div><div class="bar hi"></div>
|
|
<div class="bar"></div><div class="bar"></div><div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
<div class="card-row"><span>3月</span><span>4月</span><span>5月</span></div>
|
|
<div style="margin-top:18px">
|
|
<span class="tag">实时数据</span>
|
|
<span class="tag">自动同步</span>
|
|
<span class="tag">加密存储</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-card glass">
|
|
<div class="stat-icon" style="background:rgba(67,97,238,0.1);border:1px solid rgba(67,97,238,0.18)">🌊</div>
|
|
<div class="stat-value">2.4M</div>
|
|
<div class="stat-label">活跃用户</div>
|
|
</div>
|
|
<div class="stat-card glass">
|
|
<div class="stat-icon" style="background:rgba(232,93,136,0.1);border:1px solid rgba(232,93,136,0.18)">✦</div>
|
|
<div class="stat-value">98.7%</div>
|
|
<div class="stat-label">满意度</div>
|
|
</div>
|
|
<div class="stat-card glass">
|
|
<div class="stat-icon" style="background:rgba(6,182,164,0.1);border:1px solid rgba(6,182,164,0.18)">⚡</div>
|
|
<div class="stat-value">0.3s</div>
|
|
<div class="stat-label">平均响应</div>
|
|
</div>
|
|
<div class="stat-card glass">
|
|
<div class="stat-icon" style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.18)">◈</div>
|
|
<div class="stat-value">340+</div>
|
|
<div class="stat-label">设计组件</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">核心特性</h2>
|
|
<p class="section-sub">每一处细节都经过精心打磨，在亮色系中实现毛玻璃的极致通透感。</p>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card glass">
|
|
<div class="feature-icon">◎</div>
|
|
<div class="feature-title">动态模糊层</div>
|
|
<div class="feature-desc">基于背景内容自适应调整模糊强度，在任何亮色背景下都保持完美可读性与透亮感。</div>
|
|
</div>
|
|
<div class="feature-card glass">
|
|
<div class="feature-icon">⟡</div>
|
|
<div class="feature-title">多层透明度</div>
|
|
<div class="feature-desc">精确控制每一层的透明度与折射效果，亮色系下呈现薄冰般通透的空间层次。</div>
|
|
</div>
|
|
<div class="feature-card glass">
|
|
<div class="feature-icon">✦</div>
|
|
<div class="feature-title">光泽描边</div>
|
|
<div class="feature-desc">内嵌高光描边以高饱和白色模拟玻璃光学特性，亮色系中尤为细腻自然。</div>
|
|
</div>
|
|
<div class="feature-card glass">
|
|
<div class="feature-icon">▣</div>
|
|
<div class="feature-title">柔和阴影</div>
|
|
<div class="feature-desc">以带色相的低饱和阴影代替黑色投影，在亮色背景中更显轻盈与立体感。</div>
|
|
</div>
|
|
<div class="feature-card glass">
|
|
<div class="feature-icon">⬡</div>
|
|
<div class="feature-title">流体动画</div>
|
|
<div class="feature-desc">精心设计的弹性过渡动画，使组件在亮色系中如丝绸般顺滑地浮动与响应。</div>
|
|
</div>
|
|
<div class="feature-card glass">
|
|
<div class="feature-icon">◉</div>
|
|
<div class="feature-title">色彩渐层背景</div>
|
|
<div class="feature-desc">多色彩虹渐层光球系统，让每一区域的毛玻璃呈现出独特的背景色调折射效果。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-row">
|
|
<div class="glass-deep" style="border-radius:20px;padding:26px">
|
|
<div style="font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);margin-bottom:4px">团队成员</div>
|
|
<div style="font-size:21px;font-weight:400;color:var(--t1)">在线状态</div>
|
|
<div class="user-list">
|
|
<div class="user-item">
|
|
<div class="avatar" style="background:rgba(67,97,238,0.12);color:#3451c7">陈</div>
|
|
<div><div class="user-name">陈雨薇</div><div class="user-role">产品设计师</div></div>
|
|
<div class="user-status online"></div>
|
|
</div>
|
|
<div class="user-item">
|
|
<div class="avatar" style="background:rgba(232,93,136,0.12);color:#b84070">林</div>
|
|
<div><div class="user-name">林俊杰</div><div class="user-role">前端工程师</div></div>
|
|
<div class="user-status online"></div>
|
|
</div>
|
|
<div class="user-item">
|
|
<div class="avatar" style="background:rgba(6,182,164,0.12);color:#0a7a6e">苏</div>
|
|
<div><div class="user-name">苏晓明</div><div class="user-role">视觉设计师</div></div>
|
|
<div class="user-status away"></div>
|
|
</div>
|
|
<div class="user-item">
|
|
<div class="avatar" style="background:rgba(245,158,11,0.12);color:#b45309">张</div>
|
|
<div><div class="user-name">张晨曦</div><div class="user-role">项目经理</div></div>
|
|
<div class="user-status offline"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-deep" style="border-radius:20px;padding:26px">
|
|
<div style="font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--t3);margin-bottom:4px">实时动态</div>
|
|
<div style="font-size:21px;font-weight:400;color:var(--t1)">最新活动</div>
|
|
<div class="activity-feed">
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:#4361ee"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>陈雨薇</strong> 上传了新的设计稿「首页重构 v3.2」</div>
|
|
<div class="activity-time">2 分钟前</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:#06b6a4"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>林俊杰</strong> 完成了亮色毛玻璃组件库的开发与测试</div>
|
|
<div class="activity-time">18 分钟前</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:#e85d88"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>苏晓明</strong> 提交了新的亮色系色彩规范文档</div>
|
|
<div class="activity-time">1 小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:#f59e0b"></div>
|
|
<div>
|
|
<div class="activity-text"><strong>张晨曦</strong> 创建了里程碑「Q2 发布」并分配任务</div>
|
|
<div class="activity-time">3 小时前</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="activity-dot" style="background:#a78bfa"></div>
|
|
<div>
|
|
<div class="activity-text">系统自动完成了本周数据备份</div>
|
|
<div class="activity-time">昨天 23:00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="footer-copy">© 2026 琉光设计系统 · 保留所有权利</div>
|
|
<div class="footer-links">
|
|
<a href="#">隐私政策</a>
|
|
<a href="#">服务条款</a>
|
|
<a href="#">设计资源</a>
|
|
<a href="#">联系我们</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|