光标跟随 · Cursor Follower
英文：Cursor Follower
动效与交互难度：入门 ★
🗣️一句话大白话
一个装饰元素（圆点/光环/小图标）平滑地跟在光标后面。营销页的氛围感细节，让页面“有人气”。光标跟随元素不能直接贴住光标（那是默认光标），要有“滞后感”：圆点用 lerp 缓动追光标，像一个有弹性的跟班。告诉 AI“300ms 滞后、直径 20px、混合模式”。用途：作品集氛围、暗色页光晕、引导视觉；要防：挡住点击（pointer-events: none）、移动端禁用。
🎬真实场景
作品集、品牌页、暗色氛围页、交互引导
📮你可以这样说
「【图像模型版】在页面上加一个光标跟随装饰：直径 20px 的柔光圆点，以约 300ms 滞后平滑跟随鼠标，经过元素时可放大或变色。 【HTML/CSS/JS 版】[圆点] 用 rAF 循环 lerp（系数 0.2）追光标位置，transform: translate() 定位，pointer-events: none；hover 交互元素时增大/变色。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：跟随=贴住光标；实际要有滞后/缓动才像“跟随”
- ▸忘记 pointer-events: none 会挡住所有点击
🚫什么时候别用
- ✗移动端（无 hover，直接禁用）
- ✗内容密集的阅读页（干扰）
🧩常见变体
滞后圆点光晕跟随跟随+交互放大
💡小贴士
- ✦滞后感来自 lerp 系数 0.1-0.3；hover 元素时变换形态更有趣
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗