wanghanlin
/
RAG
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
本地 RAG 知识库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 Commits
2 Branches
0 Tags
34 MiB
 
 
 
 
 
Tree: 6f854dde14
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6f854dde14'
${ noResults }
RAG/client/icon-designs-preview.html

1019 lines
41 KiB
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 悬浮按钮图标方案预览</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: #0a0a1a;
color: #e0e0e0;
min-height: 100vh;
overflow-x: hidden;
}
/* 背景网格 */
body::before {
content: '';
position: fixed;
inset: 0;
background:
linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.page-header {
text-align: center;
padding: 60px 20px 40px;
}
.page-header h1 {
font-size: 36px;
font-weight: 700;
background: linear-gradient(135deg, #38bdf8, #818cf8, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.page-header p {
font-size: 16px;
color: #94a3b8;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.schemes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 40px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 40px 80px;
}
.scheme-card {
background: linear-gradient(145deg, rgba(30, 30, 60, 0.8), rgba(15, 15, 35, 0.9));
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 20px;
padding: 36px 32px;
position: relative;
overflow: hidden;
}
.scheme-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #818cf8, transparent);
}
.scheme-card h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
color: #f1f5f9;
}
.scheme-card .subtitle {
font-size: 13px;
color: #64748b;
margin-bottom: 28px;
line-height: 1.5;
}
.preview-area {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-bottom: 28px;
min-height: 140px;
}
/* 预览中的深色/浅色背景 */
.bg-dark, .bg-light {
width: 120px;
height: 120px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.bg-dark {
background: #0f172a;
border: 1px solid rgba(99, 102, 241, 0.15);
}
.bg-light {
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.bg-label {
position: absolute;
bottom: -22px;
font-size: 11px;
color: #64748b;
}
/* ========== 按钮通用样式 ========== */
.launcher-demo {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
user-select: none;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.launcher-demo:hover {
transform: translateY(-3px) scale(1.08);
}
.launcher-demo:active {
transform: scale(0.93);
}
.launcher-demo svg {
width: 32px;
height: 32px;
position: relative;
z-index: 2;
}
/* ========== 方案一：赛博机器人 ========== */
.scheme-1 .launcher-demo {
background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
border: 2.5px solid rgba(255, 255, 255, 0.45);
box-shadow:
0 4px 16px rgba(99, 102, 241, 0.35),
0 0 48px rgba(139, 92, 246, 0.15);
}
.scheme-1 .launcher-demo::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 40%;
height: 200%;
border-radius: 50%;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.3) 48%, rgba(255,255,255,0.1) 52%, transparent 70%);
transform: rotate(25deg);
animation: shimmer 4s ease-in-out infinite;
pointer-events: none;
}
.scheme-1 .launcher-demo::after {
content: '';
position: absolute;
inset: -18px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.06) 45%, transparent 68%);
animation: breathe 3s ease-in-out infinite;
pointer-events: none;
}
.scheme-1 .launcher-demo:hover {
box-shadow:
0 8px 28px rgba(99, 102, 241, 0.45),
0 0 64px rgba(139, 92, 246, 0.2);
}
/* ========== 方案二：脉冲星环 ========== */
.scheme-2 .launcher-demo {
background: linear-gradient(135deg, #0ea5e9, #06b6d4, #14b8a6);
border: 2.5px solid rgba(255, 255, 255, 0.45);
box-shadow:
0 4px 16px rgba(14, 165, 233, 0.35),
0 0 48px rgba(6, 182, 212, 0.15);
}
.scheme-2 .launcher-demo::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(14, 165, 233, 0.3);
animation: pulse-ring 2.5s ease-out infinite;
pointer-events: none;
}
.scheme-2 .launcher-demo::after {
content: '';
position: absolute;
inset: -14px;
border-radius: 50%;
border: 1.5px solid rgba(6, 182, 212, 0.2);
animation: pulse-ring 2.5s ease-out 0.8s infinite;
pointer-events: none;
}
.scheme-2 .launcher-demo:hover {
box-shadow:
0 8px 28px rgba(14, 165, 233, 0.45),
0 0 64px rgba(6, 182, 212, 0.2);
}
/* ========== 方案三：全息菱形 ========== */
.scheme-3 .launcher-demo {
background: linear-gradient(135deg, #f43f5e, #ec4899, #d946ef);
border: 2.5px solid rgba(255, 255, 255, 0.45);
box-shadow:
0 4px 16px rgba(244, 63, 94, 0.35),
0 0 48px rgba(217, 70, 239, 0.15);
}
.scheme-3 .launcher-demo::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 40%;
height: 200%;
border-radius: 50%;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 48%, rgba(255,255,255,0.12) 52%, transparent 70%);
transform: rotate(25deg);
animation: shimmer 3.5s ease-in-out infinite;
pointer-events: none;
}
.scheme-3 .launcher-demo::after {
content: '';
position: absolute;
inset: -20px;
border-radius: 50%;
background: radial-gradient(circle, rgba(244, 63, 94, 0.22) 0%, rgba(217, 70, 239, 0.06) 45%, transparent 68%);
animation: breathe 2.8s ease-in-out infinite;
pointer-events: none;
}
.scheme-3 .launcher-demo:hover {
box-shadow:
0 8px 28px rgba(244, 63, 94, 0.45),
0 0 64px rgba(217, 70, 239, 0.2);
}
/* ========== 方案四：矩阵幽光 ========== */
.scheme-4 .launcher-demo {
background: linear-gradient(135deg, #10b981, #059669, #047857);
border: 2.5px solid rgba(255, 255, 255, 0.45);
box-shadow:
0 4px 16px rgba(16, 185, 129, 0.35),
0 0 48px rgba(5, 150, 105, 0.15);
}
.scheme-4 .launcher-demo::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent 0%,
rgba(16, 185, 129, 0.5) 10%,
transparent 20%,
transparent 50%,
rgba(52, 211, 153, 0.4) 60%,
transparent 70%
);
animation: rotate-ring 4s linear infinite;
pointer-events: none;
mask: radial-gradient(circle, transparent 28px, black 29px, black 33px, transparent 34px);
-webkit-mask: radial-gradient(circle, transparent 28px, black 29px, black 33px, transparent 34px);
}
.scheme-4 .launcher-demo::after {
content: '';
position: absolute;
inset: -16px;
border-radius: 50%;
background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.04) 45%, transparent 68%);
animation: breathe 3.2s ease-in-out infinite;
pointer-events: none;
}
.scheme-4 .launcher-demo:hover {
box-shadow:
0 8px 28px rgba(16, 185, 129, 0.45),
0 0 64px rgba(5, 150, 105, 0.2);
}
/* ========== 动画关键帧 ========== */
@keyframes shimmer {
0%, 100% { left: -60%; opacity: 0; }
20% { opacity: 1; }
60% { opacity: 1; }
80% { left: 120%; opacity: 0; }
}
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.18); opacity: 0.3; }
}
@keyframes pulse-ring {
0% { transform: scale(0.9); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes rotate-ring {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes eye-blink {
0%, 42%, 48%, 100% { opacity: 1; }
45% { opacity: 0.1; }
}
@keyframes antenna-glow {
0%, 100% { opacity: 0.5; r: 1.2; }
50% { opacity: 1; r: 1.8; }
}
@keyframes scan-line {
0% { transform: translateY(-8px); opacity: 0; }
20% { opacity: 0.6; }
80% { opacity: 0.6; }
100% { transform: translateY(8px); opacity: 0; }
}
@keyframes data-flow {
0% { stroke-dashoffset: 20; }
100% { stroke-dashoffset: 0; }
}
@keyframes float-dot {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-2px); opacity: 1; }
}
/* SVG 内部动画 */
.svg-eye-blink { animation: eye-blink 4s ease-in-out infinite; }
.svg-antenna-glow { animation: antenna-glow 2s ease-in-out infinite; }
.svg-scan-line { animation: scan-line 3s ease-in-out infinite; }
.svg-data-flow { animation: data-flow 2s linear infinite; }
.svg-float-1 { animation: float-dot 2s ease-in-out infinite; }
.svg-float-2 { animation: float-dot 2s ease-in-out 0.3s infinite; }
.svg-float-3 { animation: float-dot 2s ease-in-out 0.6s infinite; }
/* 特性标签 */
.features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.feature-tag {
font-size: 11px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(99, 102, 241, 0.12);
color: #a5b4fc;
border: 1px solid rgba(99, 102, 241, 0.2);
}
/* 代码块 */
.code-section {
margin-top: 20px;
}
.code-toggle {
font-size: 12px;
color: #818cf8;
cursor: pointer;
border: 1px solid rgba(129, 140, 248, 0.3);
background: rgba(129, 140, 248, 0.08);
padding: 6px 14px;
border-radius: 8px;
transition: all 0.2s;
}
.code-toggle:hover {
background: rgba(129, 140, 248, 0.15);
}
.code-block {
display: none;
margin-top: 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(99, 102, 241, 0.15);
border-radius: 10px;
padding: 16px;
overflow-x: auto;
font-family: 'Fira Code', 'Cascadia Code', monospace;
font-size: 12px;
line-height: 1.6;
color: #c4b5fd;
white-space: pre;
max-height: 300px;
overflow-y: auto;
}
.code-block.show { display: block; }
/* 推荐标记 */
.recommend {
position: absolute;
top: 16px;
right: 16px;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
font-weight: 600;
}
</style>
</head>
<body>
<div class="page-header">
<h1>🤖 AI 悬浮按钮图标方案</h1>
<p>四套科技风设计方案，融合机器人与对话气泡元素，带微光呼吸动效，可直接用于 chatbot-sdk</p>
</div>
<div class="schemes">
<!-- ==================== 方案一 ==================== -->
<div class="scheme-card scheme-1">
<span class="recommend">⭐ 推荐</span>
<h2>方案一：赛博机器人</h2>
<p class="subtitle">机器人面部 + 对话气泡融合，天线带能量闪烁，眼睛自动眨眼，科技感与亲和力兼顾</p>
<div class="preview-area">
<div class="bg-dark">
<div class="launcher-demo">
<!-- SVG 方案一 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s1-body" x1="6" y1="8" x2="26" y2="28" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.82"/>
</linearGradient>
</defs>
<!-- 对话气泡主体（圆角矩形 + 尾巴） -->
<rect x="5" y="8" width="22" height="16" rx="4" fill="url(#s1-body)"/>
<path d="M9 24L6 28.5l6-4.5z" fill="url(#s1-body)"/>
<!-- 机器人天线 -->
<line x1="16" y1="8" x2="16" y2="4" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" cy="3" r="1.5" fill="#fff" class="svg-antenna-glow"/>
<!-- 机器人眼睛 -->
<rect x="9.5" y="13" width="4" height="3.5" rx="1.2" fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/>
<rect x="18.5" y="13" width="4" height="3.5" rx="1.2" fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/>
<!-- 眼睛高光 -->
<circle cx="11" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/>
<circle cx="20" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/>
<!-- 微笑嘴巴 -->
<path d="M12.5 20 Q16 22.5 19.5 20" stroke="rgba(99,102,241,0.4)" stroke-width="1.2" fill="none" stroke-linecap="round"/>
</svg>
</div>
<span class="bg-label">深色背景</span>
</div>
<div class="bg-light">
<div class="launcher-demo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s1-body-l" x1="6" y1="8" x2="26" y2="28" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.82"/>
</linearGradient>
</defs>
<rect x="5" y="8" width="22" height="16" rx="4" fill="url(#s1-body-l)"/>
<path d="M9 24L6 28.5l6-4.5z" fill="url(#s1-body-l)"/>
<line x1="16" y1="8" x2="16" y2="4" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" cy="3" r="1.5" fill="#fff" class="svg-antenna-glow"/>
<rect x="9.5" y="13" width="4" height="3.5" rx="1.2" fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/>
<rect x="18.5" y="13" width="4" height="3.5" rx="1.2" fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/>
<circle cx="11" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/>
<circle cx="20" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/>
<path d="M12.5 20 Q16 22.5 19.5 20" stroke="rgba(99,102,241,0.4)" stroke-width="1.2" fill="none" stroke-linecap="round"/>
</svg>
</div>
<span class="bg-label">浅色背景</span>
</div>
</div>
<div class="features">
<span class="feature-tag">🤖 机器人面部</span>
<span class="feature-tag">💬 气泡融合</span>
<span class="feature-tag">📡 天线能量灯</span>
<span class="feature-tag">👁 自动眨眼</span>
<span class="feature-tag">✨ 高光扫过</span>
<span class="feature-tag">🌊 呼吸光晕</span>
</div>
<div class="code-section">
<button class="code-toggle" onclick="this.nextElementSibling.classList.toggle('show')">📋 查看 SVG 代码</button>
<div class="code-block">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"&gt;
&lt;defs&gt;
&lt;linearGradient id="csk-ico-grad" x1="6" y1="8" x2="26" y2="28"
gradientUnits="userSpaceOnUse"&gt;
&lt;stop offset="0%" stop-color="#fff" stop-opacity="1"/&gt;
&lt;stop offset="100%" stop-color="#fff" stop-opacity="0.82"/&gt;
&lt;/linearGradient&gt;
&lt;/defs&gt;
&lt;!-- 对话气泡主体 --&gt;
&lt;rect x="5" y="8" width="22" height="16" rx="4" fill="url(#csk-ico-grad)"/&gt;
&lt;path d="M9 24L6 28.5l6-4.5z" fill="url(#csk-ico-grad)"/&gt;
&lt;!-- 机器人天线 --&gt;
&lt;line x1="16" y1="8" x2="16" y2="4" stroke="#fff"
stroke-width="1.5" stroke-linecap="round"/&gt;
&lt;circle cx="16" cy="3" r="1.5" fill="#fff" class="svg-antenna-glow"/&gt;
&lt;!-- 机器人眼睛 --&gt;
&lt;rect x="9.5" y="13" width="4" height="3.5" rx="1.2"
fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/&gt;
&lt;rect x="18.5" y="13" width="4" height="3.5" rx="1.2"
fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/&gt;
&lt;!-- 眼睛高光 --&gt;
&lt;circle cx="11" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/&gt;
&lt;circle cx="20" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/&gt;
&lt;!-- 微笑嘴巴 --&gt;
&lt;path d="M12.5 20 Q16 22.5 19.5 20" stroke="rgba(99,102,241,0.4)"
stroke-width="1.2" fill="none" stroke-linecap="round"/&gt;
&lt;/svg&gt;</div>
</div>
</div>
<!-- ==================== 方案二 ==================== -->
<div class="scheme-card scheme-2">
<h2>方案二：脉冲星环</h2>
<p class="subtitle">AI 机器人居中，双层脉冲环向外扩散，模拟信号发射，科技感最强</p>
<div class="preview-area">
<div class="bg-dark">
<div class="launcher-demo">
<!-- SVG 方案二 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s2-body" x1="8" y1="6" x2="24" y2="26" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.85"/>
</linearGradient>
</defs>
<!-- 机器人头部（圆角方形） -->
<rect x="8" y="9" width="16" height="14" rx="3.5" fill="url(#s2-body)"/>
<!-- 天线 -->
<line x1="16" y1="9" x2="16" y2="4.5" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="16" cy="3.5" r="1.8" fill="#fff" class="svg-antenna-glow"/>
<!-- 耳朵/侧面装饰 -->
<rect x="5.5" y="13" width="2.5" height="6" rx="1.2" fill="#fff" opacity="0.7"/>
<rect x="24" y="13" width="2.5" height="6" rx="1.2" fill="#fff" opacity="0.7"/>
<!-- 眼睛（圆形 + 瞳孔） -->
<circle cx="12" cy="15" r="2.2" fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/>
<circle cx="20" cy="15" r="2.2" fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/>
<circle cx="12.4" cy="14.5" r="0.9" fill="#fff"/>
<circle cx="20.4" cy="14.5" r="0.9" fill="#fff"/>
<!-- 嘴巴（横线格栅） -->
<line x1="12" y1="20" x2="20" y2="20" stroke="rgba(14,165,233,0.35)" stroke-width="1" stroke-linecap="round"/>
<line x1="13" y1="21.5" x2="19" y2="21.5" stroke="rgba(14,165,233,0.25)" stroke-width="0.8" stroke-linecap="round"/>
<!-- 底部对话指示点 -->
<circle cx="13" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-1"/>
<circle cx="16" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-2"/>
<circle cx="19" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-3"/>
</svg>
</div>
<span class="bg-label">深色背景</span>
</div>
<div class="bg-light">
<div class="launcher-demo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s2-body-l" x1="8" y1="6" x2="24" y2="26" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.85"/>
</linearGradient>
</defs>
<rect x="8" y="9" width="16" height="14" rx="3.5" fill="url(#s2-body-l)"/>
<line x1="16" y1="9" x2="16" y2="4.5" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
<circle cx="16" cy="3.5" r="1.8" fill="#fff" class="svg-antenna-glow"/>
<rect x="5.5" y="13" width="2.5" height="6" rx="1.2" fill="#fff" opacity="0.7"/>
<rect x="24" y="13" width="2.5" height="6" rx="1.2" fill="#fff" opacity="0.7"/>
<circle cx="12" cy="15" r="2.2" fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/>
<circle cx="20" cy="15" r="2.2" fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/>
<circle cx="12.4" cy="14.5" r="0.9" fill="#fff"/>
<circle cx="20.4" cy="14.5" r="0.9" fill="#fff"/>
<line x1="12" y1="20" x2="20" y2="20" stroke="rgba(14,165,233,0.35)" stroke-width="1" stroke-linecap="round"/>
<line x1="13" y1="21.5" x2="19" y2="21.5" stroke="rgba(14,165,233,0.25)" stroke-width="0.8" stroke-linecap="round"/>
<circle cx="13" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-1"/>
<circle cx="16" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-2"/>
<circle cx="19" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-3"/>
</svg>
</div>
<span class="bg-label">浅色背景</span>
</div>
</div>
<div class="features">
<span class="feature-tag">🤖 完整机器人</span>
<span class="feature-tag">📡 双脉冲环</span>
<span class="feature-tag">👂 耳部装饰</span>
<span class="feature-tag">💬 对话指示点</span>
<span class="feature-tag">🔵 青蓝配色</span>
<span class="feature-tag">👁 眨眼动效</span>
</div>
<div class="code-section">
<button class="code-toggle" onclick="this.nextElementSibling.classList.toggle('show')">📋 查看 SVG 代码</button>
<div class="code-block">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"&gt;
&lt;defs&gt;
&lt;linearGradient id="csk-ico-grad" x1="8" y1="6" x2="24" y2="26"
gradientUnits="userSpaceOnUse"&gt;
&lt;stop offset="0%" stop-color="#fff" stop-opacity="1"/&gt;
&lt;stop offset="100%" stop-color="#fff" stop-opacity="0.85"/&gt;
&lt;/linearGradient&gt;
&lt;/defs&gt;
&lt;!-- 机器人头部 --&gt;
&lt;rect x="8" y="9" width="16" height="14" rx="3.5" fill="url(#csk-ico-grad)"/&gt;
&lt;!-- 天线 --&gt;
&lt;line x1="16" y1="9" x2="16" y2="4.5" stroke="#fff"
stroke-width="1.8" stroke-linecap="round"/&gt;
&lt;circle cx="16" cy="3.5" r="1.8" fill="#fff" class="svg-antenna-glow"/&gt;
&lt;!-- 耳朵 --&gt;
&lt;rect x="5.5" y="13" width="2.5" height="6" rx="1.2"
fill="#fff" opacity="0.7"/&gt;
&lt;rect x="24" y="13" width="2.5" height="6" rx="1.2"
fill="#fff" opacity="0.7"/&gt;
&lt;!-- 眼睛 --&gt;
&lt;circle cx="12" cy="15" r="2.2"
fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/&gt;
&lt;circle cx="20" cy="15" r="2.2"
fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/&gt;
&lt;circle cx="12.4" cy="14.5" r="0.9" fill="#fff"/&gt;
&lt;circle cx="20.4" cy="14.5" r="0.9" fill="#fff"/&gt;
&lt;!-- 嘴巴 --&gt;
&lt;line x1="12" y1="20" x2="20" y2="20"
stroke="rgba(14,165,233,0.35)" stroke-width="1" stroke-linecap="round"/&gt;
&lt;line x1="13" y1="21.5" x2="19" y2="21.5"
stroke="rgba(14,165,233,0.25)" stroke-width="0.8" stroke-linecap="round"/&gt;
&lt;!-- 对话指示点 --&gt;
&lt;circle cx="13" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-1"/&gt;
&lt;circle cx="16" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-2"/&gt;
&lt;circle cx="19" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-3"/&gt;
&lt;/svg&gt;</div>
</div>
</div>
<!-- ==================== 方案三 ==================== -->
<div class="scheme-card scheme-3">
<h2>方案三：全息菱形</h2>
<p class="subtitle">菱形科技边框包裹机器人面孔，扫描线动效，玫红渐变配色极具视觉冲击力</p>
<div class="preview-area">
<div class="bg-dark">
<div class="launcher-demo">
<!-- SVG 方案三 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s3-frame" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.65"/>
</linearGradient>
</defs>
<!-- 六边形科技框 -->
<path d="M16 2L28 9v14l-12 7L4 23V9z" stroke="url(#s3-frame)" stroke-width="1.8" fill="none" stroke-linejoin="round"/>
<!-- 内部填充 -->
<path d="M16 5L25 10.5v11L16 27l-9-5.5v-11z" fill="url(#s3-frame)" opacity="0.15"/>
<!-- 机器人面部 -->
<rect x="10" y="10" width="12" height="11" rx="2.5" fill="url(#s3-frame)"/>
<!-- 天线 -->
<line x1="16" y1="10" x2="16" y2="6.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" cy="5.5" r="1.3" fill="#fff" class="svg-antenna-glow"/>
<!-- 眼睛（LED 条形） -->
<rect x="12" y="13.5" width="3" height="1.8" rx="0.9" fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/>
<rect x="17" y="13.5" width="3" height="1.8" rx="0.9" fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/>
<!-- 扫描线 -->
<rect x="10" y="15.5" width="12" height="0.6" rx="0.3" fill="#fff" opacity="0.2" class="svg-scan-line"/>
<!-- 嘴部数据流 -->
<line x1="12.5" y1="18.5" x2="19.5" y2="18.5" stroke="rgba(244,63,94,0.3)" stroke-width="0.8" stroke-dasharray="1.5 1" class="svg-data-flow" stroke-linecap="round"/>
</svg>
</div>
<span class="bg-label">深色背景</span>
</div>
<div class="bg-light">
<div class="launcher-demo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s3-frame-l" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.65"/>
</linearGradient>
</defs>
<path d="M16 2L28 9v14l-12 7L4 23V9z" stroke="url(#s3-frame-l)" stroke-width="1.8" fill="none" stroke-linejoin="round"/>
<path d="M16 5L25 10.5v11L16 27l-9-5.5v-11z" fill="url(#s3-frame-l)" opacity="0.15"/>
<rect x="10" y="10" width="12" height="11" rx="2.5" fill="url(#s3-frame-l)"/>
<line x1="16" y1="10" x2="16" y2="6.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" cy="5.5" r="1.3" fill="#fff" class="svg-antenna-glow"/>
<rect x="12" y="13.5" width="3" height="1.8" rx="0.9" fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/>
<rect x="17" y="13.5" width="3" height="1.8" rx="0.9" fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/>
<rect x="10" y="15.5" width="12" height="0.6" rx="0.3" fill="#fff" opacity="0.2" class="svg-scan-line"/>
<line x1="12.5" y1="18.5" x2="19.5" y2="18.5" stroke="rgba(244,63,94,0.3)" stroke-width="0.8" stroke-dasharray="1.5 1" class="svg-data-flow" stroke-linecap="round"/>
</svg>
</div>
<span class="bg-label">浅色背景</span>
</div>
</div>
<div class="features">
<span class="feature-tag">💎 六边形边框</span>
<span class="feature-tag">🤖 机器人面孔</span>
<span class="feature-tag">📡 扫描线</span>
<span class="feature-tag">🔴 玫红渐变</span>
<span class="feature-tag">✨ 高光扫过</span>
<span class="feature-tag">📊 数据流动画</span>
</div>
<div class="code-section">
<button class="code-toggle" onclick="this.nextElementSibling.classList.toggle('show')">📋 查看 SVG 代码</button>
<div class="code-block">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"&gt;
&lt;defs&gt;
&lt;linearGradient id="csk-ico-grad" x1="4" y1="4" x2="28" y2="28"
gradientUnits="userSpaceOnUse"&gt;
&lt;stop offset="0%" stop-color="#fff" stop-opacity="0.9"/&gt;
&lt;stop offset="100%" stop-color="#fff" stop-opacity="0.65"/&gt;
&lt;/linearGradient&gt;
&lt;/defs&gt;
&lt;!-- 六边形科技框 --&gt;
&lt;path d="M16 2L28 9v14l-12 7L4 23V9z"
stroke="url(#csk-ico-grad)" stroke-width="1.8"
fill="none" stroke-linejoin="round"/&gt;
&lt;path d="M16 5L25 10.5v11L16 27l-9-5.5v-11z"
fill="url(#csk-ico-grad)" opacity="0.15"/&gt;
&lt;!-- 机器人面部 --&gt;
&lt;rect x="10" y="10" width="12" height="11" rx="2.5"
fill="url(#csk-ico-grad)"/&gt;
&lt;!-- 天线 --&gt;
&lt;line x1="16" y1="10" x2="16" y2="6.5" stroke="#fff"
stroke-width="1.5" stroke-linecap="round"/&gt;
&lt;circle cx="16" cy="5.5" r="1.3" fill="#fff" class="svg-antenna-glow"/&gt;
&lt;!-- LED 眼睛 --&gt;
&lt;rect x="12" y="13.5" width="3" height="1.8" rx="0.9"
fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/&gt;
&lt;rect x="17" y="13.5" width="3" height="1.8" rx="0.9"
fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/&gt;
&lt;!-- 扫描线 --&gt;
&lt;rect x="10" y="15.5" width="12" height="0.6" rx="0.3"
fill="#fff" opacity="0.2" class="svg-scan-line"/&gt;
&lt;!-- 数据流嘴巴 --&gt;
&lt;line x1="12.5" y1="18.5" x2="19.5" y2="18.5"
stroke="rgba(244,63,94,0.3)" stroke-width="0.8"
stroke-dasharray="1.5 1" class="svg-data-flow" stroke-linecap="round"/&gt;
&lt;/svg&gt;</div>
</div>
</div>
<!-- ==================== 方案四 ==================== -->
<div class="scheme-card scheme-4">
<h2>方案四：矩阵幽光</h2>
<p class="subtitle">极简机器人面孔 + 旋转能量环，翡翠绿配色，科技感与优雅并存</p>
<div class="preview-area">
<div class="bg-dark">
<div class="launcher-demo">
<!-- SVG 方案四 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s4-body" x1="8" y1="6" x2="24" y2="26" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.8"/>
</linearGradient>
</defs>
<!-- 对话气泡 -->
<rect x="6" y="7" width="20" height="16" rx="4.5" fill="url(#s4-body)"/>
<path d="M10 23L7.5 27.5l5.5-4.5z" fill="url(#s4-body)"/>
<!-- 机器人头顶天线 -->
<line x1="16" y1="7" x2="16" y2="3" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" cy="2.5" r="1.2" fill="#fff" class="svg-antenna-glow"/>
<!-- 左眼（圆形大眼） -->
<circle cx="12" cy="14" r="2.8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/>
<circle cx="12" cy="14" r="1.3" fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/>
<circle cx="11.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/>
<!-- 右眼（圆形大眼） -->
<circle cx="20" cy="14" r="2.8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/>
<circle cx="20" cy="14" r="1.3" fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/>
<circle cx="19.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/>
<!-- 微笑 -->
<path d="M13 19.5 Q16 21.5 19 19.5" stroke="rgba(16,185,129,0.4)" stroke-width="1" fill="none" stroke-linecap="round"/>
<!-- 侧面信号线 -->
<path d="M3 12 Q1.5 15 3 18" stroke="#fff" stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/>
<path d="M29 12 Q30.5 15 29 18" stroke="#fff" stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/>
</svg>
</div>
<span class="bg-label">深色背景</span>
</div>
<div class="bg-light">
<div class="launcher-demo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
<defs>
<linearGradient id="s4-body-l" x1="8" y1="6" x2="24" y2="26" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0.8"/>
</linearGradient>
</defs>
<rect x="6" y="7" width="20" height="16" rx="4.5" fill="url(#s4-body-l)"/>
<path d="M10 23L7.5 27.5l5.5-4.5z" fill="url(#s4-body-l)"/>
<line x1="16" y1="7" x2="16" y2="3" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" cy="2.5" r="1.2" fill="#fff" class="svg-antenna-glow"/>
<circle cx="12" cy="14" r="2.8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/>
<circle cx="12" cy="14" r="1.3" fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/>
<circle cx="11.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/>
<circle cx="20" cy="14" r="2.8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/>
<circle cx="20" cy="14" r="1.3" fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/>
<circle cx="19.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/>
<path d="M13 19.5 Q16 21.5 19 19.5" stroke="rgba(16,185,129,0.4)" stroke-width="1" fill="none" stroke-linecap="round"/>
<path d="M3 12 Q1.5 15 3 18" stroke="#fff" stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/>
<path d="M29 12 Q30.5 15 29 18" stroke="#fff" stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/>
</svg>
</div>
<span class="bg-label">浅色背景</span>
</div>
</div>
<div class="features">
<span class="feature-tag">🤖 大眼机器人</span>
<span class="feature-tag">💬 气泡造型</span>
<span class="feature-tag">🔄 旋转能量环</span>
<span class="feature-tag">📡 侧面信号波</span>
<span class="feature-tag">🟢 翡翠绿</span>
<span class="feature-tag">🌊 呼吸光晕</span>
</div>
<div class="code-section">
<button class="code-toggle" onclick="this.nextElementSibling.classList.toggle('show')">📋 查看 SVG 代码</button>
<div class="code-block">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"&gt;
&lt;defs&gt;
&lt;linearGradient id="csk-ico-grad" x1="8" y1="6" x2="24" y2="26"
gradientUnits="userSpaceOnUse"&gt;
&lt;stop offset="0%" stop-color="#fff" stop-opacity="1"/&gt;
&lt;stop offset="100%" stop-color="#fff" stop-opacity="0.8"/&gt;
&lt;/linearGradient&gt;
&lt;/defs&gt;
&lt;!-- 对话气泡 --&gt;
&lt;rect x="6" y="7" width="20" height="16" rx="4.5" fill="url(#csk-ico-grad)"/&gt;
&lt;path d="M10 23L7.5 27.5l5.5-4.5z" fill="url(#csk-ico-grad)"/&gt;
&lt;!-- 天线 --&gt;
&lt;line x1="16" y1="7" x2="16" y2="3" stroke="#fff"
stroke-width="1.5" stroke-linecap="round"/&gt;
&lt;circle cx="16" cy="2.5" r="1.2" fill="#fff" class="svg-antenna-glow"/&gt;
&lt;!-- 左眼 --&gt;
&lt;circle cx="12" cy="14" r="2.8" fill="rgba(16,185,129,0.2)"
stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/&gt;
&lt;circle cx="12" cy="14" r="1.3"
fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/&gt;
&lt;circle cx="11.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/&gt;
&lt;!-- 右眼 --&gt;
&lt;circle cx="20" cy="14" r="2.8" fill="rgba(16,185,129,0.2)"
stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/&gt;
&lt;circle cx="20" cy="14" r="1.3"
fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/&gt;
&lt;circle cx="19.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/&gt;
&lt;!-- 微笑 --&gt;
&lt;path d="M13 19.5 Q16 21.5 19 19.5"
stroke="rgba(16,185,129,0.4)" stroke-width="1"
fill="none" stroke-linecap="round"/&gt;
&lt;!-- 信号波 --&gt;
&lt;path d="M3 12 Q1.5 15 3 18" stroke="#fff"
stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/&gt;
&lt;path d="M29 12 Q30.5 15 29 18" stroke="#fff"
stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/&gt;
&lt;/svg&gt;</div>
</div>
</div>
</div>
<!-- ==================== CSS 动画速查 ==================== -->
<div class="schemes" style="padding-top: 0;">
<div class="scheme-card" style="grid-column: 1 / -1;">
<h2>🎬 CSS 动画关键帧速查</h2>
<p class="subtitle">以下是所有方案共用的 CSS 动画，已包含在 styles.ts 中，SVG 内部的 class 动画需额外添加</p>
<div class="code-section">
<button class="code-toggle" onclick="this.nextElementSibling.classList.toggle('show')">📋 查看完整 CSS 动画代码</button>
<div class="code-block">/* ===== 按钮外圈动效（已存在于 styles.ts） ===== */
/* 高光扫过 */
@keyframes csk-shimmer {
0%, 100% { left: -60%; opacity: 0; }
20% { opacity: 1; }
60% { opacity: 1; }
80% { left: 120%; opacity: 0; }
}
/* 呼吸光晕 */
@keyframes csk-breathe {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: 0.35; }
}
/* 脉冲扩散环（方案二专用） */
@keyframes csk-pulse-ring {
0% { transform: scale(0.9); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
/* 旋转能量环（方案四专用） */
@keyframes csk-rotate-ring {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== SVG 内部动效（需新增到 styles.ts） ===== */
/* 眨眼 */
@keyframes csk-eye-blink {
0%, 42%, 48%, 100% { opacity: 1; }
45% { opacity: 0.1; }
}
/* 天线能量闪烁 */
@keyframes csk-antenna-glow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* 扫描线 */
@keyframes csk-scan-line {
0% { transform: translateY(-8px); opacity: 0; }
20% { opacity: 0.6; }
80% { opacity: 0.6; }
100% { transform: translateY(8px); opacity: 0; }
}
/* 数据流（虚线移动） */
@keyframes csk-data-flow {
0% { stroke-dashoffset: 20; }
100% { stroke-dashoffset: 0; }
}
/* 浮动圆点 */
@keyframes csk-float-dot {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-2px); opacity: 1; }
}
/* SVG class 绑定 */
.csk-launcher .svg-eye-blink {
animation: csk-eye-blink 4s ease-in-out infinite;
}
.csk-launcher .svg-antenna-glow {
animation: csk-antenna-glow 2s ease-in-out infinite;
}
.csk-launcher .svg-scan-line {
animation: csk-scan-line 3s ease-in-out infinite;
}
.csk-launcher .svg-data-flow {
animation: csk-data-flow 2s linear infinite;
}
.csk-launcher .svg-float-1 {
animation: csk-float-dot 2s ease-in-out infinite;
}
.csk-launcher .svg-float-2 {
animation: csk-float-dot 2s ease-in-out 0.3s infinite;
}
.csk-launcher .svg-float-3 {
animation: csk-float-dot 2s ease-in-out 0.6s infinite;
}</div>
</div>
</div>
</div>
<!-- ==================== 方案对比 ==================== -->
<div class="schemes" style="padding-top: 0;">
<div class="scheme-card" style="grid-column: 1 / -1;">
<h2>📊 方案对比</h2>
<p class="subtitle">根据使用场景选择最合适的方案</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px;">
<thead>
<tr style="border-bottom: 1px solid rgba(99,102,241,0.2);">
<th style="text-align: left; padding: 12px 8px; color: #a5b4fc;">方案</th>
<th style="text-align: center; padding: 12px 8px; color: #a5b4fc;">科技强度</th>
<th style="text-align: center; padding: 12px 8px; color: #a5b4fc;">亲和力</th>
<th style="text-align: center; padding: 12px 8px; color: #a5b4fc;">辨识度</th>
<th style="text-align: center; padding: 12px 8px; color: #a5b4fc;">动效丰富度</th>
<th style="text-align: center; padding: 12px 8px; color: #a5b4fc;">适用场景</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid rgba(99,102,241,0.08);">
<td style="padding: 12px 8px;">⭐ 方案一：赛博机器人</td>
<td style="text-align: center;">★★★☆☆</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center;">★★★★☆</td>
<td style="text-align: center;">★★★★☆</td>
<td style="text-align: center; color: #94a3b8;">通用客服、电商</td>
</tr>
<tr style="border-bottom: 1px solid rgba(99,102,241,0.08);">
<td style="padding: 12px 8px;">方案二：脉冲星环</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center;">★★★☆☆</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center; color: #94a3b8;">技术产品、SaaS</td>
</tr>
<tr style="border-bottom: 1px solid rgba(99,102,241,0.08);">
<td style="padding: 12px 8px;">方案三：全息菱形</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center;">★★★☆☆</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center;">★★★★☆</td>
<td style="text-align: center; color: #94a3b8;">潮流品牌、游戏</td>
</tr>
<tr>
<td style="padding: 12px 8px;">方案四：矩阵幽光</td>
<td style="text-align: center;">★★★★☆</td>
<td style="text-align: center;">★★★★☆</td>
<td style="text-align: center;">★★★★☆</td>
<td style="text-align: center;">★★★★★</td>
<td style="text-align: center; color: #94a3b8;">健康医疗、教育</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>