折腾一下自定义光标

发表于 更新于 分类于 阅读次数： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

今天心血来潮，又想折腾一下博客样式，这次是对鼠标样式进行自定义修改。

基本

CSS cursor 属性允许我们定义鼠标指针放在一个元素边界范围内时所用的光标形状。同时，curosor 中也允许我们使用 url 来引入自定义的光标。于是，我们就可以使用 curosr 来引入 自定义光标，再用 css 将一个元素的光标定义为我们需要的自定义光标。
最基本的代码就这样。

1
2
3
body {
  cursor: url('custom-cursor.cur'), auto;
}

其中，”url (‘custom-cursor.cur’)” 表示我们引入的资源，这个资源可以是相对位置也可以是网址，后边的 auto 则表示当前者不可用的时候，使用浏览器默认的光标形状。

解决

网站本体

既然知道了最基本的修改手段，那么现在的问题来到了：如何用最少的光标文件来使网站光标看上去尽可能的多。
我选择了三个光标，分别是:

  1. default (默认光标)
  2. text (文本光标)
  3. pointer (指针光标)

本站功能较少，站点的光标形态基本就是在这三个光标中来回切换，所以只需准备三个替换文件即可。
所以我选择了只引入三个光标文件，用来替换默认光标。

1
2
3
4
5
6
7
8
9
10
11
12
/* 自定义光标 */
p {
  cursor: url(https://cdn.yuuu.org/cur/texto.png),auto;
}

body {
  cursor: url(https://cdn.yuuu.org/cur/normal.png),auto;
}

a {
  cursor: url(https://cdn.yuuu.org/cur/link.png),auto;
}

这样，网站的大部分光标都会被替换为上述光标。

twikoo 中的一些问题

但是，我却发现我的 Twikoo 评论居然没有改变，还是原本的图标。我的强迫症不允许我出现这么糟心的情况，既然是修改了，当然还是希望全局生效。
所以我打算将 twikoo 中的类全部加上 cursor，但是却发现 twikoo 将 css 全部以内联样式形式引入，类选择器优先级比不上内联样式，没法覆盖为我的自定义光标，无奈之下，只好加上！important 来覆盖内联样式。这不算很优雅。😔

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 自定义twikoo里面的，光标*/
/* twikoo 输入框其一 */
input {
  cursor: url(https://cdn.yuuu.org/cur/texto.png),auto;
} 
/* twikoo 输入框其二 */
textarea {
  cursor: url(https://cdn.yuuu.org/cur/texto.png),auto;
} 
/* twikoo 的一些按钮，使用了 !important，来确保生效 */
.tk-icon.__comments, .tk-submit-action-icon, .el-button  {
  cursor: url(https://cdn.yuuu.org/cur/normal.png),auto !important;
}

至此，在 twikoo 中的元素的光标全部都被转换为了我当前自定义的光标。🎉🥳🎊

后记

我使用了星奈铃的鼠标指针 bilibili

原文件为 ani 文件，目前各大浏览器内核好像都不算很支持，于是我使用了 RealWorld Cursor Editor 从中抽取了一帧作为 cur 文件。但是也不知道出了什么差错，居然上传后居然没法正常的引入，在线预览变成了乱码，但是下载到本地却又正常。于是只好重新生成 png 格式上传，这才可以在线预览并且成功引入，目前暂时不知道是什么原因。按道理，一般情况是使用 cur 文件作为网站光标文件。

还有一些念念碎。我有一点点想用一个灰蒙蒙的圆圈来做光标，这样一定很酷。🤣

附上一张效果图1