焦点模式选中高亮

点击选中一张：它放大提亮浮到最上层，同层其他项降饱和、缩小、微模糊整体退后——图库、卡片列表里「聚焦 + 退隐」的高级选中态。再点一次取消。

实时 Demo

↑ 点击任意一张看聚焦效果，再点空白处/同一张取消

调参台拖动滑杆实时改手感，提示词同步更新

效果拆解

三层状态机：容器一个 class（focused/normal），卡片三态——selected（scale↑ + 提亮 + z-index↑）、dimmed（saturate↓ + scale↓ + blur）、空闲。状态全用 CSS 类切换，过渡交给 transition，JS 只管「谁选中」。
filter 三件套：saturate() 去色让背景「哑」、brightness() 压暗、blur() 拉开景深——三者叠加就是「景深虚化」的手感，比单纯加遮罩高级。
提亮与浮起：选中项用 scale(1.06) + 大投影 + z-index 抬升制造「浮到面前」；投影别用纯黑大模糊，带一点暖色/主色更耐看。
缓动选择：进出都用带减速的 cubic-bezier(.22,1,.36,1)（近似 easeOutQuint），选中瞬间有「吸过来」的劲；时长 400-500ms，太快没质感、太慢黏滞。

AI 提示词

用现代前端技术实现焦点模式（Focus Mode）选中态：网格卡片点击选中——选中项 transform:scale(${v.up}) + 提亮 + z-index 抬升 + 大投影浮起；同层未选中项 filter:saturate(${v.sat}) brightness(.85) blur(${v.blur}px) + transform:scale(${v.shrink}) 集体退隐。过渡统一用 cubic-bezier(.22,1,.36,1) ${v.dur}ms，transform/filter/box-shadow 走合成层不引起重排。再点选中项或空白处取消恢复；切换选中时旧项新项同时平滑过渡，无跳变。键盘可达：卡片可聚焦，Enter 选中，Esc 取消。

参数可调：选中放大倍数 up、其余降饱和 sat、虚化半径 blur、缩小比例 shrink、过渡时长 dur。
注意：blur 值别超过 3px（更糊没有景深感只有「脏」）；纯 CSS 即可实现，JS 只负责切换类名；触屏上 hover 态要禁用避免粘滞。