WordPress博客|自定义一个可爱的鼠标样式

挑选自己心仪的鼠标样式

首先打开custom-cursor,里面有老多有趣的鼠标样式

WordPress博客|自定义一个可爱的鼠标样式插图

挑选一个你喜欢的鼠标样式

因为我们不是给电脑设置,所以我们得获取两张透明图片然后调用链接

PS:电脑设置直接下载他的软件,然后ADD就可以自动设置,简单快捷

1.这里我随机选择一个做一下演示:

  • 链接:https://custom-cursor.com/en/collection/neon/neon-dolphin
WordPress博客|自定义一个可爱的鼠标样式插图1
海豚

2.我们发现在红框中我们的鼠标会变成海豚,于是我们从红框的地方入手

WordPress博客|自定义一个可爱的鼠标样式插图2

按下F12(网页审查元素),选择网络选项,或者Network选项,切换到图片选项

3.刷新网页

WordPress博客|自定义一个可爱的鼠标样式插图3

现在可以看见刷新出来很多的图片,这些都是加载网页的时候获取到的图片,我们要的鼠标样式自然也在其中,我们注意到neon-dolphin-cursor.png和neon-dolphin-pointer.png这两个文件

WordPress博客|自定义一个可爱的鼠标样式插图4

在浏览器中打开后发现正是我们需要的文件(其他鼠标样式同理)

5.分别单独双击这两个文件,打开后鼠标右键保存图片到本地即可

6.最后上传到WP媒体库,调用链接填写到图片链接1和2即可

附上一些我获取的,直接调用右键复制链接即可

火影

WordPress博客|自定义一个可爱的鼠标样式插图5
WordPress博客|自定义一个可爱的鼠标样式插图6

007

WordPress博客|自定义一个可爱的鼠标样式插图7
WordPress博客|自定义一个可爱的鼠标样式插图8

重力泉

WordPress博客|自定义一个可爱的鼠标样式插图9
WordPress博客|自定义一个可爱的鼠标样式插图10

猫咪

WordPress博客|自定义一个可爱的鼠标样式插图11
WordPress博客|自定义一个可爱的鼠标样式插图12

WP使用方法(其他网站同理)

登入WordPress后台仪表盘-->外观-->自定义-->额外CSS-->粘贴代码

  • 在适当位置添加代码
 /** 普通指针样式**/
body {
cursor: url(图片链接1), default;
}

/** 链接指针样式**/
a:hover{cursor:url(图片链接2), pointer;
}
WordPress博客|自定义一个可爱的鼠标样式插图13
WordPress博客|自定义一个可爱的鼠标样式插图14

版权声明:
作者:RHZ
链接:https://www.rhzhz.cn/?p=622
来源:RHZ | 用文字记录工作和学习生活
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
WordPress博客|自定义一个可爱的鼠标样式
挑选自己心仪的鼠标样式 首先打开custom-cursor,里面有老多有趣的鼠标样式 戳我戳我! 挑选一个你喜欢的鼠标样式 因为我们不是给电脑设……
<<上一篇
下一篇>>