Sweezy Cursors提供开箱即用的自定义鼠标光标方案，支持流畅跟随、悬停变形及多种动画效果，通过InsCode平台一键生成项目，含详细教学示例、预设模板启用、元素悬停配置、外观行为调整及导出部署全流程。
想在网页上添加流畅跟随、悬停变形的自定义鼠标光标，又不想从零写JavaScript监听事件和缓动逻辑？Sweezy Cursors提供了一套开箱即用的解决方案，只需引入代码、配置参数、绑定元素即可生效。
引入Sweezy Cursors库
打开InsCode（快马）平台 https://www.inscode.net，在输入框中粘贴以下指令：
请生成一个适合前端新手学习的sweezy cursors教学示例。要求代码注释详细,分步骤实现:第一步,创建一个基础的HTML页面结构。第二步,用CSS定义光标的基本样式和初始状态。第三步,用JavaScript监听mousemove事件,实现光标的跟随。第四步,添加缓动函数让光标移动更平滑。第五步,实现光标悬停在特定元素上的变形效果。请确保每个步骤都有明确的代码块和解释。
点击“项目生成”按钮，等待页面生成完整后，直接点击“预览效果”。此时你已获得一个可运行的完整项目，所有依赖都已自动注入并托管在沙盒环境中。
快速启用基础光标效果
方法一：使用预设模板一键启动
在生成的预览页面右上角，找到「快速启用」按钮 → 点击 → 选择「弹性跟随」模板 → 确认启用。
这一步会自动注入核心JS脚本、初始化cursor实例，并隐藏原生光标。无需修改任何代码，页面刷新后就能看到光标开始平滑跟随鼠标移动。
方法二：手动插入初始化代码（适用于已有项目）
复制生成项目中 <script> 标签内的初始化代码段 → 粘贴到你自己的HTML文件 </body> 标签前。
【必须确保页面已加载 DOM】 否则 cursor 实例无法定位 body 元素，导致光标不出现且无报错提示。
为指定元素添加悬停动画
第一步：给目标元素添加 data-cursor 属性
例如，给商品图片添加放大效果：<img src="product.jpg" data-cursor="zoom" />
第二步：在初始化配置中启用悬停映射
找到生成代码中的 new SweezyCursor({ ... }) 配置对象 → 在其中加入 hoverMappings: { zoom: 'scale(1.3)' }。
第三步：确认CSS中已定义对应 transform 规则
若未生成该规则，需手动在 <style> 中添加：.cursor-hover-zoom { transform: scale(1.3); transform-origin: var(--cursor-x) var(--cursor-y); }。缺少这行会导致悬停时无缩放，仅光标自身变大。
调整光标外观与行为
在生成项目的右侧「属性面板」中操作：
拖动「大小」滑块 → 实时改变光标直径（默认32px，建议16–48px区间）
点击「颜色」取色器 → 修改光标主体填充色（支持HEX/RGB，不支持渐变）
调节「缓动系数」→ 数值越小，光标响应越灵敏；数值越大，跟随延迟感越强。新手推荐从0.12开始尝试。
切换「动画类型」→ “粒子拖尾”适合科技类站点，“水波纹”适合轻量级产品页，“弹性弹跳”最通用。
导出并部署到你的网站
点击底部「导出」按钮 → 选择「导出为CSS+JS整合包」→ 系统生成 zip 文件。
解压后得到 sweezy-cursors.min.js 和 sweezy-cursors.css 两个文件。
将这两个文件上传至你网站的静态资源目录（如 /assets/js/ 和 /assets/css/）。
在你网站 HTML 的 <head> 中引入 CSS：<link rel="stylesheet" href="/assets/css/sweezy-cursors.css">
在 </body> 前引入 JS 并调用：<script src="/assets/js/sweezy-cursors.min.js"></script><script>new SweezyCursor();</script>
