更换光标皮肤的方法

效果预览

最近看到sp的自带光标很好看，所以上网找了资源放进博客

开整

光标获取

可以去网上找现成的cur，也可以自己抠图成png再https://convertio.co/zh/成cur

如果在网上找了，大小不合适（比如巨大或者超小）先转成png（用工具，不要直接改后缀名）调整大小（一般32X32）再转回来

比如我就转换了好几次（汗

生成url

因为是cur格式的文件，不能用图床，我们可以直接把它托管到github上

把文件放在

\themes\butterfly\source\

下（请举一反三

hexo cl g d三件套后再网页上查看

可以看到已经上传成功了（我建了个文件夹叫AAAmystuff

文件的url形如这样

建立css

关于css文件的建立和引入我已经在《调正首页磁贴透明度的方法》中讲过，具体方法请移步
如果你只要一个鼠标，写这个

body {
cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
default;
}
a,
img {
cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}

请url里面东西换成自己的

如果需要多种效果，可以写这个

/* 全局默认鼠标指针 */
body,
html{
  cursor: url('指定样式cur文件路径'),auto !important;
}
/* 悬停图片时的鼠标指针 */
img{
  cursor: url('指定样式cur文件路径'),auto !important;
}
/* 选择链接标签时的鼠标指针 */
a:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 选中输入框时的鼠标指针 */
input:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停按钮时的鼠标指针 */
button:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停列表标签时的鼠标指针 */
i:hover{
    cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover{
      cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover{
      cursor: url('指定样式cur文件路径'),auto;
}
/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover{
      cursor: url('指定样式cur文件路径'),auto;
}
复制代码

之后引入css就可以运行了

end