这是一款"滚动即换人"的人物图鉴特效。深空星图作底，七位角色的立绘错落地铺在画面里，页面往下滚，镜头就像推轨一样依次对准每一位：当前这位由虚化逐渐变清晰、放大居中，同时一张半透明档案卡从中间横向展开，列出姓名、出演、职务与名台词；其余角色退到景深之外。背景大字姓名则以另一种节奏滑过屏幕，像片头字幕。整套流程零 JavaScript，全部由 CSS 滚动驱动动画完成。
这款角色展示特效的四个亮点
滚动即时间轴：往回滚动画就倒放，进度完全由用户掌握，没有"错过就得刷新"的问题。
虚实景深切换：非当前角色虚化后退，视线永远被引导到主角身上。
出场时机自动分配：角色增减后，每个人的出场区间会自动重算。
档案卡是磨砂质感：半透明卡片压在星图上，信息可读性和氛围兼顾。
七个角色的出场顺序是怎么自动排开的
其一，每个人的出场区间由序号推导。这是全篇最值得学的一处：元素先取到"我是第几个"和"一共几个"，再把整条滚动进度按人数均分，算出自己的入场点与退场点。因此增删角色时，所有人的出场节奏会自动重新分配，不需要手工改一堆百分比：
--i: sibling-index(); --total: sibling-count();
源码还为不支持该特性的浏览器写好了逐个序号的兜底，稳妥。
其二，聚焦程度是一个可插值的数字。"当前有多聚焦"被抽象成一个经 @property 注册过的数值，模糊、缩放、亮度、档案卡的展开宽度全都由它统一驱动。所以镜头推拉是一个连续过程，来回滚动不会跳帧，也不会出现动画只播一半的状态。
其三，布局按容器宽度自适应而非视口。档案卡在窄容器下自动改为上下堆叠，宽容器下才并排显示。这意味着把整块效果嵌进侧边栏或分栏页面里，它也能正确响应，而不是死盯着屏幕宽度。
怎么换成自己的人物
结构非常直白：每位角色是一个区块，里面一张立绘图和一组"标签＋文本"，复制一段即可增删，出场时机会自动重排。背景那一组大字姓名单独一处，与角色区块保持同样数量即可。
立绘建议使用去背的透明 PNG，人物完整、背景干净，叠在星图上才有剪影感。主色、次色、星空背景、滤镜强度、卡片透明度都集中在样式表顶部的变量区，换成企业蓝或杂志黑白只需替换几个色值；连页面的可滚动长度也是变量，调长就是放慢整体节奏。
兼容提示：核心依赖滚动驱动动画，Chrome / Edge 115+ 与 Safari 26+ 效果完整，Firefox 需手动开启相关标志位；序号函数属于更新的特性，源码已备好兜底方案，不支持时静态排布依然完整。素材内置了检测提示，不会白屏。运行方法参见压缩包内的帮助文档。
关于这款人物图鉴特效的常见问题
人物数量能改吗？
能，这正是它设计得最巧的地方。出场区间由序号和总数推导，加到十几位或减到三四位，节奏都会自动重排，不需要手动调整任何时间百分比。
立绘必须是透明背景吗？
强烈建议是。人物叠在星空背景上，带白底的图会露出方块边缘；用去背 PNG 才能得到剪影般的融合效果，这是观感好坏的关键。
能换成产品或作品展示吗？
可以。把立绘换成产品图、档案字段换成规格参数，就是一套滚动式产品图鉴，结构完全不用动。
手机上体验如何？
布局按容器宽度自适应，窄屏下档案卡改为上下堆叠，滚动驱动在移动端浏览器同样跟手。图片较多时建议先压缩，避免首屏加载偏慢。
适用场景
适合团队与讲师介绍、影视剧组人物页、游戏角色图鉴、品牌代言人展示等需要"一位一位讲"的页面，换成产品图后也可做成滚动式产品册。下载源码即可查看完整实现。
