这个效果是怎么做出来的
聚光模式的本质是用滤镜给界面打舞台灯光：被选中的那一张放大（scale 1.08 左右）、提亮、饱和度拉满，其余全部降饱和转灰、压暗、轻微缩小再叠一点 blur。实现上每个元素挂两个类之间的切换——选中态和退让态，全部变化交给 CSS transition 一次搞定：filter 从 none 过渡到 grayscale(0.75) brightness(0.55) blur(1.5px)，transform 从 1 过渡到 0.94，JS 只负责在点击时重算该给谁加哪个类，三行逻辑。
两个细节决定高级感。一是速度差：选中的立刻亮起来（0.3 秒），其余的慢半拍退后（0.45 秒），视线先到主角再扫过背景，节奏感就出来了；二是选中项要提 z-index，否则放大后被相邻元素的边界裁切穿帮。
怎么用这条提示词
适合图库、相册精选、作品集、商品网格这类「多选一细看」的场景。发给 AI 时说明网格结构，它会生成类切换逻辑。如果你想在选中时同步显示大图或文字说明，补一句「选中项下方浮出详情条」，AI 会把布局让出来。
想效果更好？试试这些
blur 控制在 1 到 2px，再多就糊成色块反而廉价；灰度控制在 0.6 到 0.8，留一点颜色记忆比全灰更像「退到幕后」。缩小幅度 0.9 到 0.95 之间，缩太狠网格会露缝。移动端注意 filter 动画是像素级计算，九宫格没问题，几十张的瀑布流要只给视口内的元素挂滤镜。最后补一个闭环：点击空白处也要能还原，别把用户锁在选中态里。