看到论坛有小伙伴有这样的需求，让 deepseek 写了个。
然后完善了下功能和做了些兼容性。
1 支持顺滑光标，可设置是否开启
2 支持是否闪烁光标，可设置是否开启
3 支持自定义光标其他样式，比如高宽，颜色等
4 目前仅支持在编辑器中使用
录屏很难录出真实效果，会掉帧，仅供参考
参考 [js] 编辑器自定义光标（支持顺滑光标 / 是否闪烁 / 自定义样式等） - wilsons 的回帖
虽然光标一般不会引起什么后果，但还是请测试无误后使用，使用前做好备份工作。由此引起的任何后果自负，均与作者与本代码无关。
👇 打赏后可见（为什么要打赏后可见？主要想通过这种方式统计使用人数及用户需求，以帮助作者分析哪些功能是用户最需要的）
0.0.4 优化滑动鼠标动画，更加丝滑
也可以自定义样式(放到 css 代码片段即可)（注意，自定义 css 样式如果有动画有可能改变现在的闪烁或顺滑状态，另外，自定义样式会覆盖默认样式，可能会引起异常，需要根据自己去调整。）
比如：
弹性跟踪效果
#custom-cursor {
transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
霓虹灯流转效果
#custom-cursor {
width: 3px;
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
background-size: 400% 100%;
animation: rainbowMove 3s linear infinite, cursor-blink 1s steps(2, jump-none) infinite;
}
@keyframes rainbowMove {
0% { background-position: 0%; }
100% { background-position: 400%; }
}
@keyframes cursor-blink {
from { opacity: 1; }
to { opacity: 0.5; }
}
光晕扩散效果
#custom-cursor {
box-shadow: 0 0 8px 2px rgba(0, 150, 255, 0.5); /* 蓝色光晕 */
filter: drop-shadow(0 0 4px rgba(255, 64, 0, 0.8)); /* 叠加橙色辉光 */
}
呼吸脉冲效果 （占用资源较大，谨慎使用）
#custom-cursor {
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(100, 200, 255, 0.7); }
70% { box-shadow: 0 0 0 12px rgba(100, 200, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(100, 200, 255, 0); }
}
科技感渐变流光
#custom-cursor {
background: linear-gradient(45deg, #00ffff, #ff00ff);
width: 2px; /* 更宽的光柱 */
filter: blur(1px) brightness(1.5);
}
静态图片（也可以是 gif 动画）
#custom-cursor {
width: 24px !important; /* 图片宽度 */
height: 24px !important; /* 图片高度 */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M16 3L3 10v12l13 7 13-7V10L16 3z" fill="%2300ff88"/><path d="M16 5L5 11v10l11 6 11-6V11L16 5z" fill="none" stroke="%23fff" stroke-width="2"/></svg>')
center/contain no-repeat;
background-size: 100% 100%; /* 确保图片拉伸填充 */
}
更多样式 👇
注意，以下修改 svg 填充颜色就可以改成自己喜欢的颜色哦
蓝色心跳 （svg 动画）
#custom-cursor {
width: 2px;
height: 20px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="20"><rect x="0" y="0" width="2" height="20" rx="1" ry="1" fill="cyan"><animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/></rect></svg>') center/contain no-repeat;
background-size: 100% 100%;
}
外星飞碟
#custom-cursor {
width: 0.5px;
background: radial-gradient(circle, rgba(0,255,255,0.8), transparent 60%);
border: 2px solid rgba(0,255,255,0.6);
border-radius: 50%;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(0,255,255,0.7)) brightness(1.2);
mix-blend-mode: difference;
transition: transform 0.1s ease;
}
破碎玻璃
#custom-cursor {
width: 2px;
height: 24px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="24"><g fill="%2300ffff"><rect y="0" width="2" height="6"/><rect y="8" width="2" height="4"/><rect y="14" width="2" height="6"/></g></svg>') center/contain no-repeat;
background-size: 100% 100%;
}
炽热的爱
#custom-cursor {
width: 2px;
height: 24px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="24"><defs><linearGradient id="grad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="%23ff4444"/><stop offset="100%" stop-color="%23ff9900"/></linearGradient></defs><rect width="2" height="24" fill="url(%23grad)"/></svg>') center/contain no-repeat;
background-size: 100% 100%;
}
空心长方体
#custom-cursor {
width: 2px;
height: 24px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="24"><rect width="2" height="24" rx="1" ry="1" fill="none" stroke="%2300ffff" stroke-width="0.5"/></svg>') center/contain no-repeat;
background-size: 100% 100%;
}
跳跃的幽灵 （svg 动画）
#custom-cursor {
width: 2px;
height: 24px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='24'><rect width='2' height='24' fill='black'/><rect width='2' height='8' fill='lime'><animate attributeName='y' values='0;16;0' dur='1s' repeatCount='indefinite'/></rect></svg>") center/contain no-repeat;
background-size: 100% 100%;
}
@HanOrz 大佬的 ZenType 效果
see 【焦点写作 ｜ZenType】聚焦、打字机与顺滑光标的插件
#custom-cursor {
width: 3px;
background: #5d8cd7;
pointer-events: none;
transition: opacity 0.7s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: cursor-blink 2.3s 1.5s infinite;
[data-theme-mode="dark"] & {
background: #8ab4f8;
}
}
@keyframes cursor-blink {
0% { opacity: 1; }
50% { opacity: 0.9; }
55% { opacity: 0.7; }
60% { opacity: 0.3; }
95% { opacity: 0; }
100% { opacity: 0.3; }
}
用的 callout 确实是插件，不过我刚才试了试，公式上光标位置错误这个应该是可以在原生思源（不安装插件和主题）上稳定复现的。感觉 Callout 的光标错位问题和这个是一码事：
打出一个公式（行级公式），以公式结尾。
回车，跳到下一行。到目前为止都没问题。
这时候按 backspace，会发现光标显示在一个很奇怪的位置（但是如果输入东西的话就会发现光标的真实位置确实是在公式后面）
0.0.5 带来重大更新，建议升级
1 改进了在光标闪烁时，当移动/输入/点击时的不自然感，解决了会有光标突然消失感的问题；
2 改进了滚动时光标会有闪烁的问题；
3 取消了选择文本时的顺滑效果，以解决选择文本时跳动感过强，体验不好的问题
另外，评论区增加更多光标样式，可通过修改 svg 填充颜色，自定义自己喜欢的风格哦
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于