这是一款图标卡片墙：八张深色卡片横向排开，每张一个线条图标。鼠标移到哪一张，背景中就会浮现一个巨大的同款图标虚影并滑到该卡片上方，卡片本身同时点亮成专属颜色。移开后虚影缓缓退回画面外，整个过程有明显的延迟与缓动，节奏很舒服。全程零 JavaScript，连点击展开的状态记忆都是用隐藏复选框实现的。

这款图标卡片特效的四个亮点

大图标虚影自动跟随：位置绑定被悬停的卡片，不需要计算任何坐标。
八张卡片八种主题色：颜色由变量集中管理，换配色只改一处。
点击可锁定状态：借助隐藏表单元素记住选中项，纯 CSS 也能有"选中"概念。
极轻量：只有 HTML 和 CSS，图标是内联矢量图，无任何外部依赖。

零脚本怎么让虚影跟着鼠标走

其一，虚影"锚"在卡片上而不是跟着指针坐标。它并不追踪鼠标的实时位置，而是把当前被悬停的卡片当作定位基准，直接从锚点读取要对齐的边与中心：

position-anchor: --a-card;

好处是移动过程平滑可控，不会像跟随鼠标那样抖动，响应式换行后也照样对得准。

其二，容器用 :has() 感知悬停。父级通过它判断"我下面有卡片正被悬停"，从而切换虚影的位置变量与过渡延迟——不悬停时虚影停在画面外，悬停时立刻滑入。这种父级响应子级状态的写法，以前必须靠脚本加类名。

其三，状态记忆用隐藏复选框。八个视觉上不可见的复选框对应八张卡片，点击卡片其实是点了对应的表单控件，样式再据此响应。这套"CSS 状态机"写法在源码里结构清晰，是很值得借鉴的思路。

怎么换成自己的图标与配色

只有 HTML 与 CSS 两个文件。每张卡片是一个标签元素，内部放一个矢量图标，复制一段即可增删；卡片数量变化时，记得同步增删对应的隐藏控件即可。

八个主题色在样式表顶部以变量形式集中定义，改成品牌色系只需替换这一组值。虚影的大小、进入延迟、缓动曲线同样是独立变量。图标是内联矢量图，换成自己的图标库直接替换路径数据即可，不涉及图片资源。

兼容提示：锚点定位属于较新的 CSS 能力，建议在 Chrome / Edge 125+ 上查看完整效果；不支持的浏览器中卡片布局与点击状态依然正常，仅背景虚影的跟随会失效，属于渐进增强。运行方法参见压缩包内的帮助文档。

关于这款悬停跟随特效的常见问题

卡片数量能改吗？

能。卡片和隐藏控件成对存在，增删时保持一一对应即可，其余样式无需改动。

能换成图片而不是图标吗？

可以，但要注意背景虚影是同一图形的放大版本，用线条图标观感最好；换成照片时建议同时调低虚影的不透明度。

移动端是什么效果？

触屏没有悬停态，点击会触发选中状态，卡片仍会点亮成对应颜色，布局也做了自适应，只是背景虚影的跟随动画不出现。

可以改成横向滚动吗？

可以。卡片区是常规布局，改成横向滚动容器不影响锚点定位的跟随逻辑，虚影依然能正确对位。

适用场景

适合服务介绍、功能特性展示、产品能力矩阵、分类导航等板块，深色底的科技调性也很适合 SaaS 与工具类网站首页。下载源码即可查看完整实现。