Cursor

文本插入光标会随旁边字符的大小变长或变短。

在[应用位置]添加“自适应插入光标”(Adaptive Caret)效果，也叫 adaptive caret size。
文本插入光标移动到离指针最近的字符前面，并迅速拉长或缩短到与该字符同高，尺寸变化流畅利落，不要弹跳。
保持文字本身不移动，并让光标像跟随指针一样跟随键盘移动。

圆形光标通过 mix-blend-mode 的 difference 模式反转其下方的颜色。

在[应用位置]添加“混合模式光标”(Blend-Mode Cursor)，也叫 difference cursor 或反色光标(inverting cursor)。
用一个实心圆替换指针，它毫无延迟地紧贴在指针下方，并反转所经过的文字和图形的颜色。
把混合效果限制在这块区域内，不要和页面其他部分混合；确保在深色模式下也能清晰反色，触屏设备上则保留普通光标。

一个形状或标签带着弹性或缓动的延迟跟随指针。

在[应用位置]添加“光标跟随”(Cursor Follower)效果，也叫 following pointer 或 smooth cursor。
一个小圆点标记以柔和的缓动延迟跟随指针，并平滑滑行到指针停下的位置正好停住，不要弹跳。
保留真实指针可见，标记绝不能挡住点击，触屏设备上不显示它。

悬停在文字列表项上时，一张预览图片跟随指针移动。

在[应用位置]添加“悬停图片跟随”(Cursor Image Hover)效果，也叫 hover image follow 或悬停图片预览(image preview on hover)。
指针停在文字列表项上时，该项的一张小预览图浮在指针旁边，带着轻微、流畅的延迟跟随指针；指针移到另一项时，预览图滑动切换到下一张。
预览图绝不能挡住列表的点击；在触屏和键盘操作下，即使没有预览图，列表也要完全可用。

指针周围的一圈光照亮内容，其余部分保持暗色。

在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果，也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针，照亮下方的内容，区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针，改为直接完整点亮显示内容。

指针移动时，身后留下一串逐渐消失的图形。

在[应用位置]添加“光标拖尾”(Cursor Trail)效果，也叫鼠标拖尾(mouse trail)。
指针移动时，身后留下一小串小圆点，每个点都迅速缩小并淡出，让拖尾保持短小，顺滑地描出移动路径。
只在指针移动时绘制拖尾，绝不能挡住点击；在触屏设备上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要显示。

默认箭头被替换为带样式的圆点或圆环，在可交互元素上方时会发生变化。

在[应用位置]添加“自定义光标”(Custom Cursor)，也叫动画光标(animated cursor)或光标替换(cursor replacement)。
用一个精确跟随指针的小圆点，加上一个稍稍落后跟随的圆环来替换默认箭头；悬停在链接和按钮上时，圆环平滑放大。
在触屏设备和文本输入框中保留普通光标，并且自定义光标绝不能挡住点击。

指针靠近时元素被吸向指针，离开后又弹回原位。

在[应用位置]添加“磁吸按钮”(Magnetic Button)效果，也叫磁吸目标(magnetic target)或磁吸悬停(magnetic hover)。
指针靠近时，按钮被轻轻吸向指针，按钮文字移动得再多一点；指针离开后，按钮带着一点小弹跳回到原位。
不要让周围布局跟着移动；在触屏设备上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭吸附。

一片短线条转向指针，就像磁铁周围的铁屑。

在[应用位置]添加“磁吸铁屑”(Magnetic Filings)效果。
一组网格排列的短线条立即转向，每一条都正对指针，就像磁铁周围的铁屑；没有指针时，全部朝向中心。
把它作为纯装饰背景，绝不能挡住点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，让线条保持静止。