添加自定义鼠标图标

之前偶然机会进去看了看以前加的web群。里面的大佬各种秀,又燃起了唔写web的热情。看看自己的博客都已经有大半年了,还是原来的模板,惭愧啊

这次就先加一个小东西吧,效果见这个页面的鼠标

在css里面有这样一个标签cursor

就是用来改变鼠标样式的

url需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default默认光标(通常是一个箭头)
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针(一只手)
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右(东)移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize此光标指示矩形框的边缘可被向上(北)移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize此光标指示矩形框的边缘可被向下移动(南)。
w-resize此光标指示矩形框的边缘可被向左移动(西)。
text此光标指示文本。
wait此光标指示程序正忙(通常是一只表或沙漏)。
help此光标指示可用的帮助(通常是一个问号或一个气球)

其他的都是可以在教程往上面了解很清楚,就不详细说了。咱们就主要来说说自定义的吧

要想用url来自定义鼠标的图标,就要有cur文件(静图)和ani文件(动画)

他们可以从百度,Google上面找到,因为这些素材特别乱唔也没找到什么好的网站,就不推荐了

像唔这样想表达个性的人来说,自己做是最好的。这里有推荐的软件名字叫anifx

点击这里下载

下载完成后解压,进入AniFXchina文件夹,双击打开AniFX.exe。

右上角,点击文件,新建

一般默认就好了,第一次使用都是默认肯定没有什么问题哒~

然后就是作画时间了,一开始就随便糊弄一下就好了,主要是方便以后的使用。

之后文件另存为一个比较方便的地点。比如在直接的网页目录下~

在css里面添加这段代码

body{
cursor: url('http://blog.ziyicitu.com/wp-content/uploads/2019/09/citu.cur'),auto;
}

url里面就是自己cur文件的路径,后面一般要加一个默认图标,防止url里面的图标不能用。这里你可以直接拷贝这个到css里面就可以直接看到效果。

对于wordpress来说,要添加额外的css效果可以登录到自己的站点,在自定义最下面就可以看见额外的css。

如果要给特定的文章加css,wordpress早就预料到了这一点,每一篇文章都有一个独特的css名称。例如这篇文章的,就是postid-160

知道需要指针图标的id后就可以在css里面直接添加

.postid-160
{	cursor:url('http://blog.ziyicitu.com/wp-content/uploads/2019/09/citu.cur'),auto;
}

这样只要在body的盒子里鼠标就会变成自己画的那样,但是遇到子盒子就会变回原来的样子。解决方法之一就是加一个写css文件,专门用来放自己的图标。

然后在不同的盒子里面用各种特殊的指针,打造属于自己的博客o(〃’▽’〃)o