2026-07-28 // SKILL V2
SKILL 技术文档
轻盈网站 — 完整结构说明 · 组件文档 · 扩展指南
# 轻盈网站 — 完整结构文档 (SKILL v2)
最后更新: 2026-07-28
---
## 一、整体架构
Canvas 粒子系统 (60颗金色粒子, z-index:2, pointer-events:none)
氛围光晕 atmo-bg (z-index:1, 3层径向渐变)
Hero 主区 — 「轻盈」+ 终端打字效果
节点信息面板 (info-panel) — 悬停卡片展示详情
卡片列表 (8个项目入口) — article.entry 浮动动画 + 排斥效果
全屏页面 (8个 page-section) — 每页独立渐变背景 + 不同色相
页脚 Glitch 特效 — [xiaoshi-个人网站]
滚动名言条 (ticker) — 禅意短句, 悬停放大 + 色闪
---
## 二、颜色系统
--accent: #D4A843 (主金色) | --bg: #0a0a0a (背景) | --text: #e8e8e8 (文字)
卡片类型色: ACTIVE #E8C04A / LINK #D4A843 / GAME #C49830 / DOWNLOAD #B58A2E / ARCHIVE #9C7A2E / EXPLORE #D4A843
---
## 三、粒子系统
50 颗粒子, document.createElement("canvas") 动态创建
鼠标吸引 (范围250px, f = 1-ad/250, 系数0.03) | 点击排斥 (范围400px, 力15)
亮度正弦波脉动: bright = 0.5+0.5*sin(time*freq*brightSpeed+phase)
滚动切换粒子色相 — 每页固定颜色, hues数组映射
随机连线: i%2===0 || j%3===0, 线宽1.5, 金色辉光 shadowBlur=12
移动端: 15颗, 无辉光无连线无鼠标跟踪
---
## 四、交互效果
卡片浮动: 4s周期, 10px幅度, 依次延迟0.4s
卡片排斥: 悬停卡片上浮, 其他下压12px + 透明度0.5
回弹曲线: cubic-bezier(0.34,1.56,0.64,1)
滚动条悬停: padding 10→20px, 文字金色↔白色闪烁 + 反向脉动
信息面板: 卡片联动, 悬停显示节点详情
---
## 五、设备适配
同一文件 index_all.html, 运行时根据 device 自适应
桌面: 60粒子+辉光+连线+全屏页面+鼠标交互
移动: 15粒子(无辉光无连线)+隐藏全屏页面+触屏优化
检测: window.innerWidth<768 || ontouchstart → .is-mobile
---
## 六、扩展指南
添加卡片: 复制 article.entry 模板, 设置 data-type/data-info/href
添加全屏页: 复制 section.page-section, 修改色相/背景/内容
添加粒子色: 在 hues 数组末尾追加新色相值
添加配件: 在 cardData 中添加对应项
---
## 七、文件列表
index_all.html — 最新完整版 (设备自适应, ~50KB)
SKILL.md — 独立文档 (本内容)
index_v4.html — 桌面版基础 (无SKILL页面)