v1.0定版
This commit is contained in:
703
refrence/glassmorphism.html
Normal file
703
refrence/glassmorphism.html
Normal file
@@ -0,0 +1,703 @@
|
||||
<!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-bg: rgba(255,255,255,0.12);
|
||||
--glass-border: rgba(255,255,255,0.25);
|
||||
--glass-shadow: rgba(0,0,0,0.15);
|
||||
--blur: 18px;
|
||||
--text-primary: rgba(255,255,255,0.95);
|
||||
--text-secondary: rgba(255,255,255,0.65);
|
||||
--text-muted: rgba(255,255,255,0.4);
|
||||
--accent: rgba(163,210,255,0.85);
|
||||
--accent-warm: rgba(255,195,140,0.85);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
font-weight: 300;
|
||||
background: #0a0e1a;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── 背景 ── */
|
||||
.bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 20% 30%, rgba(67,97,238,0.45) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 70%, rgba(138,43,226,0.35) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 50% 40% at 55% 10%, rgba(0,180,216,0.3) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 40% 35% at 10% 80%, rgba(255,100,100,0.2) 0%, transparent 50%),
|
||||
linear-gradient(135deg, #0a0e1a 0%, #0f1629 50%, #0d1120 100%);
|
||||
}
|
||||
|
||||
.bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* 漂浮光球 */
|
||||
.orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: drift 12s ease-in-out infinite; }
|
||||
.orb-1 { width: 500px; height: 500px; top: -100px; left: -100px; background: rgba(67,97,238,0.25); animation-delay: 0s; }
|
||||
.orb-2 { width: 400px; height: 400px; bottom: -80px; right: -80px; background: rgba(138,43,226,0.2); animation-delay: -4s; }
|
||||
.orb-3 { width: 300px; height: 300px; top: 40%; left: 60%; background: rgba(0,180,216,0.18); animation-delay: -8s; }
|
||||
|
||||
@keyframes drift {
|
||||
0%, 100% { transform: translate(0,0) scale(1); }
|
||||
33% { transform: translate(30px, -20px) scale(1.05); }
|
||||
66% { transform: translate(-20px, 15px) scale(0.97); }
|
||||
}
|
||||
|
||||
/* ── 毛玻璃基础 ── */
|
||||
.glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--blur));
|
||||
-webkit-backdrop-filter: blur(var(--blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.glass-deep {
|
||||
background: rgba(255,255,255,0.07);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
box-shadow: 0 16px 48px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* ── 布局 ── */
|
||||
.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(10,14,26,0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.nav-links { display: flex; gap: 36px; }
|
||||
.nav-links a {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.08em;
|
||||
transition: color 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text-primary); }
|
||||
|
||||
.nav-btn {
|
||||
font-size: 12px;
|
||||
color: var(--text-primary);
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 20px;
|
||||
padding: 7px 20px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.06em;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-btn:hover { background: rgba(255,255,255,0.18); }
|
||||
|
||||
/* ── 英雄区 ── */
|
||||
.hero {
|
||||
padding: 160px 0 80px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-text .eyebrow {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-text h1 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 52px;
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-text h1 em {
|
||||
font-style: normal;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 36px;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.hero-actions { display: flex; gap: 16px; align-items: center; }
|
||||
|
||||
.btn-primary {
|
||||
padding: 13px 32px;
|
||||
background: rgba(163,210,255,0.18);
|
||||
border: 1px solid rgba(163,210,255,0.4);
|
||||
border-radius: 30px;
|
||||
color: var(--accent);
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: rgba(163,210,255,0.28);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px rgba(163,210,255,0.15);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
padding: 13px 24px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.06em;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.btn-ghost:hover { color: var(--text-primary); }
|
||||
|
||||
/* ── 英雄卡片 ── */
|
||||
.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,0.4), transparent);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
font-size: 11px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(0,220,130,0.12);
|
||||
border: 1px solid rgba(0,220,130,0.25);
|
||||
color: rgba(0,220,130,0.9);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.big-number {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 56px;
|
||||
font-weight: 300;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.big-number span {
|
||||
font-size: 20px;
|
||||
color: var(--text-secondary);
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
|
||||
.mini-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
height: 48px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.bar {
|
||||
flex: 1;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background: rgba(163,210,255,0.25);
|
||||
transition: background 0.2s;
|
||||
animation: barGrow 0.8s ease-out both;
|
||||
}
|
||||
.bar:hover { background: rgba(163,210,255,0.5); }
|
||||
.bar.active { background: rgba(163,210,255,0.65); }
|
||||
|
||||
@keyframes barGrow {
|
||||
from { transform: scaleY(0); transform-origin: bottom; }
|
||||
to { transform: scaleY(1); transform-origin: bottom; }
|
||||
}
|
||||
.bar:nth-child(1) { height: 45%; animation-delay:0.05s }
|
||||
.bar:nth-child(2) { height: 65%; animation-delay:0.1s }
|
||||
.bar:nth-child(3) { height: 50%; animation-delay:0.15s }
|
||||
.bar:nth-child(4) { height: 80%; animation-delay:0.2s }
|
||||
.bar:nth-child(5) { height: 60%; animation-delay:0.25s }
|
||||
.bar:nth-child(6) { height: 90%; animation-delay:0.3s; }
|
||||
.bar:nth-child(6).active { animation-delay:0.3s }
|
||||
.bar:nth-child(7) { height: 70%; animation-delay:0.35s }
|
||||
.bar:nth-child(8) { height: 55%; animation-delay:0.4s }
|
||||
.bar:nth-child(9) { height: 85%; animation-delay:0.45s }
|
||||
.bar:nth-child(10){ height: 75%; animation-delay:0.5s }
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ── 统计行 ── */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
transition: transform 0.25s, box-shadow 0.25s;
|
||||
cursor: default;
|
||||
}
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 48px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.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(--text-primary);
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ── 特性卡片 ── */
|
||||
.section-title {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-sub {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 40px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
border-radius: 20px;
|
||||
padding: 28px;
|
||||
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.08);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 22px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* ── 底部行 ── */
|
||||
.bottom-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 24px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
/* 用户列表 */
|
||||
.user-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
|
||||
.user-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 18px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
cursor: default;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.user-item:hover { background: rgba(255,255,255,0.09); }
|
||||
.avatar {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.user-name { font-size: 13px; color: var(--text-primary); font-weight: 400; }
|
||||
.user-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
||||
.user-status {
|
||||
margin-left: auto;
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.online { background: rgba(0,220,130,0.9); box-shadow: 0 0 6px rgba(0,220,130,0.5); }
|
||||
.away { background: rgba(255,190,50,0.9); }
|
||||
.offline{ background: rgba(150,150,150,0.5); }
|
||||
|
||||
/* 活动流 */
|
||||
.activity-feed { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }
|
||||
.activity-item {
|
||||
display: flex; gap: 16px; padding: 16px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.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(--text-secondary); line-height: 1.6; }
|
||||
.activity-text strong { color: var(--text-primary); font-weight: 500; }
|
||||
.activity-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
||||
|
||||
/* ── 页脚 ── */
|
||||
.footer {
|
||||
border-top: 1px solid rgba(255,255,255,0.07);
|
||||
padding: 32px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-copy { font-size: 12px; color: var(--text-muted); }
|
||||
.footer-links { display: flex; gap: 28px; }
|
||||
.footer-links a { font-size: 12px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
|
||||
.footer-links a:hover { color: var(--text-secondary); }
|
||||
|
||||
/* 标签 */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.07);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: var(--text-secondary);
|
||||
margin-right: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</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>
|
||||
|
||||
<!-- 导航 -->
|
||||
<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 class="hero-text">
|
||||
<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 active"></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:20px; display:flex; gap:10px; flex-wrap:wrap;">
|
||||
<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(163,210,255,0.12); border:1px solid rgba(163,210,255,0.2);">🌊</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(200,160,255,0.12); border:1px solid rgba(200,160,255,0.2);">✦</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(100,230,180,0.12); border:1px solid rgba(100,230,180,0.2);">⚡</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(255,195,140,0.12); border:1px solid rgba(255,195,140,0.2);">◈</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:28px;">
|
||||
<div style="font-size:13px; color:var(--text-muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px;">团队成员</div>
|
||||
<div style="font-size:22px; font-weight:400; color:var(--text-primary); margin-bottom:2px;">在线状态</div>
|
||||
<div class="user-list">
|
||||
<div class="user-item">
|
||||
<div class="avatar" style="background:rgba(163,210,255,0.2);">陈</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(200,160,255,0.2);">林</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(100,230,180,0.2);">苏</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(255,195,140,0.2);">张</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:28px;">
|
||||
<div style="font-size:13px; color:var(--text-muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px;">实时动态</div>
|
||||
<div style="font-size:22px; font-weight:400; color:var(--text-primary); margin-bottom:2px;">最新活动</div>
|
||||
<div class="activity-feed">
|
||||
<div class="activity-item">
|
||||
<div class="activity-dot" style="background:rgba(163,210,255,0.9);"></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:rgba(100,230,180,0.9);"></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:rgba(200,160,255,0.9);"></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:rgba(255,195,140,0.9);"></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:rgba(255,100,130,0.9);"></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>
|
||||
Reference in New Issue
Block a user