RHZ'S BLOG | 个人分享

  • 首页
  • 笔记
  • 小日常
  • 音乐
  • 读书
  • 软件分享
YOLO
  1. 首页
  2. 小日常
  3. 正文

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

2022年8月13日 769点热度 13人点赞 0条评论

挑选自己心仪的鼠标样式

首先打开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
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: WordPress美化 鼠标样式
最后更新:2022年8月13日

RHZ

即使单枪匹马,我亦勇敢无畏

点赞
< 上一篇
下一篇 >

文章评论

取消回复
归档
  • 2023年2月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2021年7月

COPYRIGHT © 2022 RHZ的博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2022008933号-1