今天我想分享下我自己折腾custom cursor的整个过程，这个玩意儿看起来简单，坑特别多，折腾了我好几天。一开始我完全没在意，结果弄得一团糟。
开始动手试试
前两天我刷博客看到别人用custom cursor特别酷，就是一个自定义的光标图片替代系统默认的那个。我就心痒痒了，想着自己也搞一个试试。打开编辑器，直接在CSS文件里加了一行代码：cursor: url('*'), auto; 然后兴冲冲地刷新网页。结果？屁都没显示！光标还是老样子，气得我差点把电脑扔了。
第一个大坑：不显示
我不信邪，以为图片路径错了。重新检查了好几遍，确认图片存在，路径也对。还特意把图片缩小到32x32像素，因为网上说大了不行。再刷新，还是原封不动。这时候我才想起来问朋友，他说你得用base64编码。我去试了，把图片转成base64字符串贴进去，代码长到像一坨屎，可光标终于动起来了。但没高兴三分钟，问题又来了：在火狐浏览器上，光标直接消失了，像个幽灵一样！
为啥？我问了一圈，原来不同浏览器对cursor属性支持不一。解决办法是加个fallback方案：cursor: url('*'), url('*'), auto; 这下总算在所有浏览器都显示了。但好景不长，新问题接踵而至。
折腾兼容性和性能
光标显示后，我发现网页速度变慢了，卡得像老牛拉车。我这才意识到，图片太大绝对不行，尤其是base64格式，占用资源超多。我换了个小图标，8x8像素的，结果又太小，看不清。折腾半天，重新找了个20x20的平衡点。性能问题刚解决，鼠标移动时却跳来跳去，像是在跳舞。
解决策略很简单：在CSS里加上cursor的hotpoint设置，比如url('*') 5 5; 让图标中心对准鼠标指针位置。调整后顺畅多了。
问题还没完：在手机端，压根不管用！屏幕触控时，光标逻辑完全不同。我只能用JavaScript写了个判断：如果是移动设备，就禁用custom cursor；否则，启用CSS方案。
搞定分享
经历这些波折，我终于把整个过程记录下来，写成详细步骤：
- 第一步：图片别超32x32像素，小点更稳当。
- 第二步：兼容所有浏览器，加fallback路径或者base64编码。
- 第三步：设hotpoint别让光标乱跳。
- 第四步：手机端就关掉，免得出幺蛾子。