Xiang Terminal 网站信息
Xiang 个人网站
技术栈
- 结构HTML5 语义化标签
- 布局CSS3 Flexbox 与 Grid
- 视觉容器查询 backdrop-filter CSS 变量
- 脚本原生 JavaScript ES6 无框架无构建
- 图形Canvas 2D 与 OffscreenCanvas
- 多核Web Worker 离屏渲染
- 动效IntersectionObserver 与 FLIP 过渡
- 加载fetch 流式下载与 Blob URL 缓存
- 滤镜SVG 像素块化与色阶量化
- 图片WebP 阶梯式压缩
- 字体本地自托管 像素字体按字符集子集化
加载画面
- 结构全屏覆盖层固定三层 文字压在花屏之下 只从噪点缝隙透出
- 噪点三层贴图 64px 128px 32px 全部整数倍缩放 像素对齐
- 跳位三层各自独立随机间隔 45~95ms 重掷整像素偏移
- 透出本体组不透明度 0.80 前后两层只是组内混合权重
- 闪烁逐帧平均亮度波动 0.347% 低于 WCAG 无害门槛
- 门控退场即停 页面隐藏彻底停 12s 兜底强制放行
- 文字「加载中……」浅谷呼吸不闪烁 位置微抖沿用首页
- 字号clamp(44px, 8vw, 180px) 比首页大电视文案大一档
像素滤镜链路
- 滤镜全站两组 #tv-crt-fx 供大电视与加载文字 #tv-crt-fx-mini 供四台小电视
- 链路feFlood → feTile → feComposite → feMorphology → feComponentTransfer
- 来源滤镜定义由脚本在 body 首位同步注入 幂等且全站唯一
- 边界本浮层正文不挂滤镜 像素感由真像素字体直接承担
- 降级无 JS 时文字正常显示 只是没有点阵质感
终端排版
- 字体全量缝合像素字体 Fusion Pixel 中文拉丁同一款真点阵字形
- 子集完整字体 3.4MB 按浮层字符集压到约 36KB 工具脚本生成
- 字号正文 17 小节标题 15 版本号 21 徽标 13 全部整数 px
- 大标题clamp(32px, 5vw, 54px) 行高比例与字距保持终端节奏
- 辉光继承式多层 text-shadow 含红蓝色散 近距光晕与环境光
- 排版纯静态像素排版 无逐字形变 滚动零重绘开销
- 细节大标题显式声明字体防全局 h1 覆盖 徽标显式去辉光
- 对齐统一开启 tabular-nums 数字等宽对齐
逐行打印
- 方式不重建 DOM 不逐字写入 clip-path 从右向左揭开
- 变量每行三个 CSS 变量控制时长 步数与起始延迟
- 时长min(2.2s, 0.22s + 字符数 × 0.035) 步数 6 到 60 随字符数
- 确定性纯 CSS 交错延迟 延迟期间保持隐藏 绝不空白
- 节奏行数多时自动压缩间隔 整页约 5 秒打完
- 降级减少动态效果下一次完整显示 无 JS 时内容默认可见
电视墙布局
- 宽度按视口双向收敛 保证整墙完整可见 超宽屏设上限
- 比例图片层锁定 1416 / 800 配 object-fit contain 防压扁错位
- 缩放容器查询上下文字号全部用 cqw 图缩多少字缩多少
- 热区五台电视判定区一律收敛到该台屏幕（花屏层）范围
- 裁切判定区并入玻璃多边形 clip-path 机壳空白处不可点
- 对齐桌面端电视墙底对齐视口底部 高度只预留顶部约 80px
- 窄屏竖排为上大下四小 独立裁切与字号按各屏换算
屏幕几何
- 玻璃五块屏幕按边界逐行采样 30 点生成多边形 clip-path
- 一致同一多边形作用于文字层与花屏层 形状完全一致
- 范围多边形只框住真实显示屏区域 排除黑边与机壳
- 接缝主电视与小电视组的真实接缝修正到 x 约 747
- 布局桌面端分组容器用 display contents 子元素百分比定位不变
悬停换词
- 换词明面标签在光标圆内挖洞 暗面文字裁同一个圆露出
- 层级挖洞与裁圆写在带滤镜的子元素上 避免渲染错位杂块
- 大圈大电视 140px 小电视 100px 圈本身透明只负责换词
- 独占大圈激活期间圆点与外环整体隐藏 场上只有一个圈
- 花屏光标停在哪台电视 仅该台屏幕出现雪花噪点
- 性能矩形只在窗口尺寸变化与进入激活时刷新 不逐帧读布局
柜上热区
- 音乐机判定区 x 660 到 958 y 591 到 722 按原图逐像素实测换算
- 书本判定区 x 462 到 678 与音乐机同顶同高同底 重叠带归书本
- 描边内嵌 SVG 路径 viewBox 直接用照片像素坐标 描边恒 1.2px
- 理由弃用圆角矩形伪元素 顶角近乎直角 旧盒外溢 1 到 2px
- 音符小音符常驻循环随机间隔 大音符悬停触发一次 450ms 冷却
- 行为两处热区点击都打开网站信息浮层 键盘聚焦同样触发描边
自定义光标
- 首页光标是一张遥控器图片 热点落在图片上部
- 浮层其它页面用三件套光标 圆点 扩散环 缓动跟随环
- 跟随跟随环每帧向圆点靠近 12% 接近后停帧省性能
- 圆点直径 12px 半透明灰白加毛玻璃 悬停放大到 16px
- 特例时间线用反色放大圈 技能区只隐藏大圈保留圆点
- 兜底任何时刻场上始终有一个光标可见
缩放免疫
- 基准以加载时的 devicePixelRatio 反向写 zoom 补偿系数
- 单位视口单位统一折算为 calc(Nvh / var(--vzu, 1))
- 断点零特异性选择器门控 防强制缩放误套窄屏规则
- 坐标光标 透镜 弹窗等消费方写样式前除以补偿系数
- 实测75% 到 200% 缩放下几何 比例 位置零差异
- 边界浏览器菜单缩放值无法读写 以加载时排版为基准
图库与弹窗
- 跑马灯图库网格重组为 130vw 乘 145vh 倾斜 8 度的六排轨道
- 排布首末排各 12 张 中间四排各 24 张 首次构建时打乱一次
- 循环相邻排反向循环取模回环 悬停暂停交由滚轮控制
- 弹窗上限 960 乘 720 随视口收缩 左媒体区占宽 56% FLIP 480ms
- 大图fetch 流式下载 底部细进度条显示真实百分比 Blob 缓存复用
- 自适应按原始长宽比 contain 兜底 不裁切不留黑边
- 资源弹窗图只出长边 1080 内的优化版 脚本批量生成
渲染管线
- Worker三类 Canvas2D 动效统一迁到共享 Web Worker 独立线程渲染
- 柔化粒子环上下边缘各留 140px 高斯模糊过渡板块交界
- 跟随文字倾斜 0.85rad 跟随系数 0.12
- 火花点击火花在粒子清空时自动停帧 避免 CPU 空转
- 浮层二级页浮层内嵌于主页 内部独立滚动 打开即重算尺寸
- 渐显单一 IntersectionObserver 统一驱动 进入视口即取消观察
- 兜底减少动态效果关动效 无 JS 内容默认完整可见 语义标签齐备
当前版本
v1.9.5当前版本
- 浮层网站信息由独立页并入主页浮层 点击音乐机或书本即打开
- 翻页评价板块支持滚轮翻页 翻到头交还页面滚动
- 光标默认光标改半透明灰白毛玻璃小圈 悬停放大不变
- 音符音乐机小音符常驻循环 悬停触发大音符与描边显现
- 加载加载页花屏之下新增「加载中……」 与电视文字同源
许可说明
本项目为个人作品展示网站，所有内容和设计均为原创。
