鼠标特效是最容易做过头的一类效果。它的诱惑很直接：改一个光标，整个页面立刻有了「这是个用心做的站」的气质；但它的代价也很直接——用户每移动一下手，你的代码就要跑一次。
这一类和背景动画有个本质区别。背景是自己跑自己的循环，跟用户输入不耦合；光标效果是被输入驱动的。在 120Hz 的屏幕上，指针事件每秒能触发一百多次，如果你在每次回调里直接改样式、直接重绘，浏览器就得在一帧里被迫做好几次布局与合成，手一动就掉帧。正确的写法是把事件里做的事压到最少——只记录坐标——真正的位置计算和绘制统一攒到 requestAnimationFrame 里做一次。本文这 14 款里做得好的几款都是这个结构，做得随意的那几款你能在自己的机器上直接感觉出来：光标动得越快，效果越黏。
还有一件必须先说的事：这一整类效果在触屏上是不成立的。MDN 对 hover: none 的定义是「主要输入机制完全不能悬停，或者不能方便地悬停（例如很多移动设备会在用户执行不便的长按时模拟悬停），又或者根本没有主要指针输入机制」；pointer: coarse 指的是「主要输入机制包含精度有限的指点设备，例如触摸屏上的手指」，pointer: fine 才是鼠标那种精确指针。所以这类效果的正确姿势是整体包进 @media (hover: hover) and (pointer: fine)，手机上连脚本都别加载——不是为了性能，是因为在那儿它本来就不会发生，白白多下载几十 KB。
下面 14 款分四组：光标拖尾、鼠标揭示与擦除、引力跟随、局部悬停反馈。越往后成本越低、风险越小。
第一组 · 光标拖尾（01 - 05）—— 给指针加一条尾巴
01. 3KB 的丝滑线条跟随，本组成本最低的一款
Canvas 3KB 原生 JS 弹簧物理
一条卷曲的丝带跟着光标扭动，用弹簧物理做缓动，所以它不是硬邦邦地贴着指针走，而是有一点被拽着追上来的迟滞感——这一点迟滞正是它好看的原因。基于 Canvas 加原生 JS，整个效果 3KB。
3KB 这个数字值得单独看一眼。同类的光标效果动辄引入一整个动画库，几十上百 KB 起步；而这一款没有任何依赖，扔进任何项目都不会跟现有技术栈打架。想在作品集或者创意机构官网上加一点趣味细节，又不愿意为此背一个库，它基本是本文的默认答案。
它的局限也在轻上：形态就是这一条丝带，颜色和粗细可以改，但换不出别的花样。要更强的视觉冲击，得往下看第 04、05 款，代价是重上两个数量级。
02. 星光粒子连线，参数可完全自定义
Canvas 粒子样式可配 连线光效 可当背景层
星空主题的跟随效果，鼠标移动时沿路径生成星形粒子，粒子之间还会拉出闪电状的连接光效。JS + Canvas 实现，粒子样式和连线效果都开放了参数，能改成完全不同的观感。
它跟第 01 款的定位差别在于它是可以铺满整页当背景层用的，不只是光标附近的一小圈。科幻、奇幻、游戏类的页面用这一款，氛围一次到位。
铺满整页就有一个必须处理的问题：这一层 Canvas 会盖在内容之上。务必给它加 pointer-events: none，否则用户点不到底下的按钮和链接——这是自定义光标类效果最常见、也最伤的一个 bug，而且在开发者自己的机器上不一定马上暴露。
03. 小脚丫踩着光标走，本文最克制的一款拟物
GSAP + SVG 路径动画 平滑缓动
一串小脚印沿着光标的移动轨迹一步一步踩出来，用 SVG 路径动画配 GSAP 的平滑缓动实现。它的巧思在于脚印是有朝向的——会随移动方向转，所以看着像真的在走，而不是简单地在轨迹上盖章。
它是本组里唯一走「具象」路线的：粒子和丝带都是抽象的视觉装饰，而脚印带着叙事感。用在有故事线的页面上很搭——品牌历程、探索式的长页面、儿童或宠物相关的站点。
反过来说，具象也意味着它挑内容。一个金融数据平台的首页配一串小脚丫，气质是打架的。SVG 图形本身可以换，但换成什么、跟品牌是否成立，得先想清楚，别只因为效果本身可爱就用。
04. WebGPU 金粉粒子轨迹，本文技术门槛最高的一款
WebGPU + Canvas 金粉粒子 文字入场动画
页面的标题文字先以闪烁的金粉轨迹炫酷入场，之后鼠标每移动一下都会拖出细腻闪耀的金色粒子。质感确实拉满，奢侈品、高端品牌主页、节日主题页这类场景是它的主场。
但它有一条必须先过的关：WebGPU 的浏览器支持。Chrome 与 Edge 从 113 起支持，Safari 从 26.0 起支持（含 iOS 26，部分特性），Firefox 目前默认仍未开启，全球覆盖率大约八成出头（可在 caniuse 查最新数字）。也就是说每五个访客里可能有一个什么都看不到。用它之前必须先想好降级方案——检测 navigator.gpu 是否存在，不存在就退回一个静态的金色渐变，而不是让页面空在那里。
第二个代价是电。粒子系统持续跑在 GPU 上，笔记本用户的风扇会有反应，手机端更是直接不该加载。放在只停留十几秒的活动页上没问题，放在需要久留的内容页上不合适。
05. WebGL 星云流体拖尾，视觉冲击最强
WebGL 流体模拟 光线散射
光标划过时留下如星云般的烟雾光影，色彩柔和、带流动质感，靠模拟粒子流动与光线散射做出来。沉浸感是本文最强的一款，高端品牌官网、创意站、互动艺术展示是它的位置。
它跟第 04 款是同一件事的两种技术实现——这一款用 WebGL，兼容性上要稳得多：WebGL 的支持面已经接近全覆盖，不用像 WebGPU 那样准备降级路径。想要这种流体质感又不想赌浏览器版本，选这一款。
它的问题是会抢走内容的注意力。星云足够漂亮，漂亮到用户会开始玩它——来回甩鼠标看颜色变化，然后忘了自己是来干嘛的。这在作品集首页是好事，在带转化目标的页面上是灾难。判断标准很简单：如果这个页面有一个你希望用户点的按钮，就别用这一款当全屏背景。
第二组 · 鼠标揭示与擦除（06 - 09）—— 让用户动手去发现
06. 模糊照片里的一块清晰圆，图片细节查看器
CSS + JS 遮罩揭示 支持点击
整张照片是模糊的，鼠标移动或点击的位置会显出一个清晰的圆形窗口，用户得自己去找。JS + CSS 实现，没有重型依赖。
这一组和第一组的区别在于它有目的：拖尾是纯装饰，揭示是在制造探索行为。用户为了看清楚会主动在图上移动鼠标，这个动作本身就是停留时长。摄影作品展示、产品细节、地图或长图内容都吃得住这个设计。
两个提醒。第一，模糊层不能替代无障碍——屏幕阅读器读到的仍然是那张图的 alt，重要信息不能只藏在清晰圆里。第二，触屏上它退化成「点一下亮一块」，探索的乐趣没了，移动端建议直接给清晰原图。
07. 晃动鼠标擦掉冰霜，本组唯一的纯 CSS 实现
纯 CSS 磨砂质感 会自动复原
汽水藏在一层朦胧的「冷藏玻璃」后面，鼠标悬停会出现雪花图标，晃动鼠标冰霜被慢慢擦开，停下来之后冰霜又缓缓布满——这个「会长回来」的细节是它比同类高明的地方，因为它把交互变成了一个可以反复玩的循环，而不是擦完就结束。
而且它是纯 CSS 的。没有 JS，没有 Canvas，没有渲染循环，动画交给合成器处理，性能代价接近于零。这在本文里相当难得——第一组那几款的效果都要靠持续跑循环换来。
它的适用面窄，也不必假装宽：夏日饮品、冷饮广告、清凉主题的营销页，就是这几类。它是一个场景专属的小玩意，不是通用组件，硬套到别处会显得莫名其妙。
08. 液态汽油花遮罩，挥鼠标散开油渍露出内容
WebGL + Canvas 液体遮罩 开场动画
内容被一层流动的液态遮罩盖着，颜色像汽油在水面上泛出的那种虹彩，鼠标挥过去遮罩会平滑地散开，底下的内容逐渐显出来。WebGL 实现，质感是本组最好的。
它最合适的位置是开场——落地页或品牌站的第一屏，用它做一次「揭幕」，用户挥两下鼠标把内容擦出来，仪式感立住了就翻页往下走。
但正因为它是遮罩，它天然挡在内容前面，必须设一个兜底：几秒后自动散开，或者给一个「跳过」。不能让一个不知道要挥鼠标的用户对着一屏油渍发呆——尤其是触屏用户根本没有「挥鼠标」这个动作。这一类揭示效果里，这一款的风险是最高的，因为它挡住的不是装饰，是内容本身。
09. 人体 X 光扫描，clip-path 的一次实用示范
纯 CSS clip-path 支持按钮切换
悬停时透出人体轮廓下的骨骼结构，晃动鼠标可以扫过全身，另配了按钮切换来查看完整骨架。核心是 CSS 的 clip-path 属性——用一个跟随指针的裁剪区域，把上下两层图叠在一起做「透视」。
这个思路的迁移价值比效果本身大。凡是「同一位置的两层内容需要对照」的场景，都能用同一套写法，而且不需要 JS：
产品剖面——外壳与内部结构叠在一起，鼠标扫到哪儿看到哪儿；
装修的改造前后对比，比左右并排两张图更直观；
地图的图层切换，比如同一区域的卫星图与路网图；
服装的面料细节，外观图下面藏着织物特写。
医学教育、科普、产品拆解页是最直接的用途。
要注意的是两层图必须严格对齐，差几个像素就会露馅，而且响应式缩放时对齐关系还得跟着维持。做这类效果，素材准备的时间通常比写代码长。
第三组 · 引力与跟随（10 - 12）—— 被鼠标牵着走的是内容
10. 近场轨道引力画廊，离鼠标越近的图越大
CSS + JS 引力场 轨道旋转
多张缩略图围着中心点匀速旋转，鼠标移动时会产生一个引力场：附近的图片自动放大并朝指针方向偏移，离得越远越小。CSS + JavaScript 实现，没有 WebGL 的负担。
它跟前两组的分野很清楚：被牵动的不是光标，是内容本身。用户不会觉得自己在玩特效，只会觉得这堆图对自己的动作有反应——这种反馈更自然，也更容易接受。作品集、互动相册、品牌首页的图集区都合适。
两个实际问题要先解决：
轨道排布很挑数量。图太少显得空，太多会互相压住；八到十二张是比较舒服的区间，超出这个数就得考虑分层或分页。
图片是同时加载的。轨道上的每一张都要先下载下来才能转，首屏一次拉十几张大图是灾难，压缩和懒加载策略得提前定好。
11. 跟着光标飞的是一串图片，不是粒子
GSAP 物理插值 图片可自定义
光标移动时会拖出多张图片跟着走，用 GSAP 的平滑物理插值做缓动，图片随后逐渐淡出。跟随的是实打实的图片，不是抽象粒子，而且图片内容完全可以换成自己的。
这一点让它有了别的拖尾效果没有的功能性：你可以把作品缩略图、产品图当成拖尾内容。用户随手一划，看到的是你的东西，而不是随机的光斑。创意设计、艺术作品集用这一招，能一眼跟通用模板拉开距离。
代价是对图片素材的要求变高了。这些图片会以小尺寸、快速运动、半透明的状态出现，构图复杂或者主体不明确的照片在这种状态下就是一团色块。选图要挑主体大、对比强、一眼能认的那几张，数量也别贪多——同时在场的图越多，越容易糊成一片。
12. 工具栏放大镜跟随，本文最实用的一款
CSS 焦点放大 工具栏组件
一排功能图标组成的工具栏，鼠标悬停到哪个图标，哪个就以放大镜式的高亮凸出来，焦点随指针平滑移动。
本文十四款里，只有这一款是真正意义上的界面组件而不是装饰。它解决的是一个具体问题：图标条上的图标彼此长得像、又都不带文字，用户很难确认自己现在停在哪一个上。放大这个动作既是反馈也是确认，实际点错率会降下来。应用界面、网页导航栏、编辑器工具条都能直接用。
做这类效果有一条容易被忽略的规矩：放大不能挤动旁边的图标。如果整排图标随着放大而左右推挤，用户瞄准的目标会跑，反而更容易点错。正确做法是用 transform: scale 在原位放大（不触发布局），并给容器留出溢出空间。
第四组 · 局部悬停反馈（13 - 14）—— 成本最低，几乎没有副作用
13. 卡片边框上的 3D 光影跟随
CSS + JS 边框光影 局部触发
鼠标在卡片上或者绕着卡片移动时，边框上的光影随之流动，像有一束光在卡片的棱边上滑过。CSS 配少量 JS，只在卡片区域内计算。
这一组的价值就在「局部」两个字。它只在指针进入卡片时才工作，离开就完全停下——不占全局事件、不铺全屏图层、不跟页面滚动抢资源。前面十二款要考虑的那些副作用，到这里基本消失了。产品卡片、方案卡片、导航入口都能加。
要控制的是数量。一屏上摆二十张卡片、每张都会发光，页面会显得廉价；光影这种效果的分量来自稀缺，用在少数几个你希望被点的入口上最有效。
14. 流光按钮，光跟着鼠标在按钮表面走
CSS 状态反馈 过渡动画
带状态反馈的按钮，悬停时表面会有一束光随指针位置移动。用过渡和动画实现，作用范围就是按钮本身。
放在最后，是因为它体现了这一整篇文章想说的那件事：光标交互的价值不在于炫，在于让界面对用户的动作有回应。一个会跟着手动的按钮，比一个只会变色的按钮更容易让人确信「这里可以点」，而它的成本几乎为零。表单提交、主要转化按钮、定价页的行动按钮，都值得加这一层。
唯一要守的底线是别牺牲可读性。流光扫过时，按钮上的文字对比度会瞬间下降；亮色光配浅色底尤其危险。做完之后在光最亮的那一帧上截个图，确认文字仍然读得清——这一步很多人省了，然后就有了一个好看但看不清的按钮。
用之前，三件事得先定下来
一、给触屏留一条正常的路。把整类效果包进 @media (hover: hover) and (pointer: fine)，脚本也一起条件加载。上面十四款里没有一款在手机上是完整成立的，而移动端往往是流量的大头——别让主要访客拿到的是一个「少了点什么」的版本，要让他们拿到一个本来就不含这一层的版本。
二、尊重系统的减弱动效设置。prefers-reduced-motion: reduce 表示用户已经在设备上开启了减弱动态效果——macOS 在辅助功能的显示设置里、Windows 11 在辅助功能的视觉效果里、iOS 在辅助功能的动态效果里。开启它的人里有一部分是前庭功能障碍患者，大幅移动的画面会让他们真的不适。拖尾和流体这两类首当其冲，检测到就直接关掉，别只是放慢。
三、想清楚要不要藏起系统光标。不少自定义光标效果会写 cursor: none，把系统指针换成自己画的那个。这一步的代价比看起来大：一旦脚本出错、动画掉帧、或者指针移出你的画布范围，用户就会彻底「丢失光标」，那种感觉相当糟糕。稳妥的做法是保留系统光标、让效果作为附加层存在；真要隐藏，至少确保脚本异常时能自动把光标还回去。
最后说回性能。这十四款里，第 07、09 两款是纯 CSS 的，几乎不花代价；第 04、05、08 三款跑在 GPU 上，是另一个量级的东西，值得为它们单独做一次移动端和低配机器的实测。其余的都在 Canvas 与 JS 这一层——它们本身不重，但重不重取决于你有没有把位置计算收进 requestAnimationFrame。这一条几乎决定了同一个效果在你站上是丝滑还是发黏。
本文的 14 款都在童哲网前端资源板块。相关的几篇：CSS 按钮与开关交互效果（第 14 款的完整版本）、卡片与布局效果合集（第 13 款要贴上去的容器）、Three.js 与 WebGL 网页 3D 特效（第 04、05、08 款的技术底座）。
