提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“自定义光标”(Custom Cursor),也叫动画光标(animated cursor)或光标替换(cursor replacement)。
用一个精确跟随指针的小圆点,加上一个稍稍落后跟随的圆环来替换默认箭头;悬停在链接和按钮上时,圆环平滑放大。
在触屏设备和文本输入框中保留普通光标,并且自定义光标绝不能挡住点击。相似的动效
A
移动指针试试
Cursor Follower (光标跟随)
别称 Following Pointer, Smooth Cursor, Cursor follow, Spring follow cursor
一个形状或标签带着弹性或缓动的延迟跟随指针。
适用场景
自定义光标、工具提示
在[应用位置]添加“光标跟随”(Cursor Follower)效果,也叫 following pointer 或 smooth cursor。
一个小圆点标记以柔和的缓动延迟跟随指针,并平滑滑行到指针停下的位置正好停住,不要弹跳。
保留真实指针可见,标记绝不能挡住点击,触屏设备上不显示它。AB
移动指针试试
Blend-Mode Cursor (混合模式光标)
别称 Difference cursor, Inverting cursor
圆形光标通过 mix-blend-mode 的 difference 模式反转其下方的颜色。
适用场景
创意作品集
在[应用位置]添加“混合模式光标”(Blend-Mode Cursor),也叫 difference cursor 或反色光标(inverting cursor)。
用一个实心圆替换指针,它毫无延迟地紧贴在指针下方,并反转所经过的文字和图形的颜色。
把混合效果限制在这块区域内,不要和页面其他部分混合;确保在深色模式下也能清晰反色,触屏设备上则保留普通光标。移动指针试试
Cursor Trail (光标拖尾)
别称 Mouse trail
指针移动时,身后留下一串逐渐消失的图形。
适用场景
活泼有趣的落地页
在[应用位置]添加“光标拖尾”(Cursor Trail)效果,也叫鼠标拖尾(mouse trail)。
指针移动时,身后留下一小串小圆点,每个点都迅速缩小并淡出,让拖尾保持短小,顺滑地描出移动路径。
只在指针移动时绘制拖尾,绝不能挡住点击;在触屏设备上,或者如果用户开启了“减少动态效果”(prefers-reduced-motion),就不要显示。aBcD
移动指针试试
Adaptive Caret (自适应插入光标)
别称 Cursor: Adaptive caret size
文本插入光标会随旁边字符的大小变长或变短。
适用场景
编辑器、打字效果
在[应用位置]添加“自适应插入光标”(Adaptive Caret)效果,也叫 adaptive caret size。
文本插入光标移动到离指针最近的字符前面,并迅速拉长或缩短到与该字符同高,尺寸变化流畅利落,不要弹跳。
保持文字本身不移动,并让光标像跟随指针一样跟随键盘移动。Cursor 中的其他动效
A
移动指针试试
Magnetic Button (磁吸按钮)
别称 Magnetic target, Magnetic hover
指针靠近时元素被吸向指针,离开后又弹回原位。
适用场景
CTA 按钮、导航图标
在[应用位置]添加“磁吸按钮”(Magnetic Button)效果,也叫磁吸目标(magnetic target)或磁吸悬停(magnetic hover)。
指针靠近时,按钮被轻轻吸向指针,按钮文字移动得再多一点;指针离开后,按钮带着一点小弹跳回到原位。
不要让周围布局跟着移动;在触屏设备上,或者如果用户开启了“减少动态效果”(prefers-reduced-motion),就关闭吸附。移动指针试试
一片短线条转向指针,就像磁铁周围的铁屑。
适用场景
创意背景
在[应用位置]添加“磁吸铁屑”(Magnetic Filings)效果。
一组网格排列的短线条立即转向,每一条都正对指针,就像磁铁周围的铁屑;没有指针时,全部朝向中心。
把它作为纯装饰背景,绝不能挡住点击;如果用户开启了“减少动态效果”(prefers-reduced-motion),让线条保持静止。