动效与动画

指针跟随高亮 Cursor Spotlight

一束柔光跟着鼠标走,照到哪亮到哪,深色卡片阵列的导览利器

指针聚光

(光会跟着鼠标走;没鼠标时自动巡演)

**指针跟随高亮(Cursor Spotlight)**像给鼠标装了手电筒:一束柔和的光斑跟着光标走,照到的卡片微微亮起。深色背景 + 一排功能相似的卡片(定价方案、功能列表)时,它同时解决两件事:画面不死板、鼠标位置看得见。

什么时候用:深色的功能卡阵列、游戏/科技产品的氛围页。浅色背景上光斑存在感弱,收益小;大面积内容页会把用户的注意力搅碎,只给“值得照”的区域。

对 AI 说清楚的三要素:① 光斑半径 150250px、透明度 0.150.25,亮到刺眼就俗了;② 用 CSS 变量 + radial-gradient 实现,别用 JS 每帧改 style 重绘整层;③ 光标离开要把光斑收回去(渐隐或回中),别留一盏没人管的灯。

复制即用的提示词片段

深色区域用指针跟随高亮(Cursor Spotlight):容器监听
pointermove,把指针位置写入 CSS 变量,叠加一层
radial-gradient(190px circle at 变量位置, 微亮色, transparent)
的光斑层;光标离开时光斑平滑回到中心。