← 返回导航

自定义光标效果

tricks

自定义光标演示

移动鼠标查看效果，悬停按钮时光标会变大变色

悬停这里试试

关键点

  • 自定义光标通过 JS 监听 mousemove 事件，让一个 DOM 元素跟随鼠标移动
  • 使用 transform: translate() 更新位置比 left/top 性能更好
  • 隐藏原生光标用 cursor: none，确保只显示自定义光标
  • hover 到可点击元素时改变光标的大小、颜色或形状，增强交互反馈
  • 加入轻微延迟（lerp 线性插值）让跟随更顺滑有"拖尾"质感

效果说明

自定义光标效果，用 JS 监听鼠标位置创建一个跟随光标移动的圆形指示器。hover 到交互元素时光标变大变色，增强交互反馈。包含内点 + 外环两层结构，外环有延迟跟随效果。