v1.0定版

2026-05-27 17:14:08 +08:00
parent 1b7210de4f
commit 5b19d9fe69
32 changed files with 2074 additions and 2915 deletions
--- a/refrence/glassmorphism-light.html
+++ b/refrence/glassmorphism-light.html
@@ -0,0 +1,410 @@
+<!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>