鼠标自定义样式美化-附图标下载

一、前言

逛博客的时候,无意中看到有的博客网站里面弄了把默认的额鼠标效果改了,觉得挺好看的,美观性好很多。

对于喜欢瞎整腾的我,本站自然也不能落下,这个自定义鼠标样式美化有两种,一个用于所有状态显示,一个用于链接状态显示。具体效果参考本站如下图所示:

鼠标自定义样式美化-附图标下载插图

二、具体使用

从上图中可以看到,鼠标颜色是变化的,移上有超链接的地方就会变另外一种,其实这两个样子也是一样,只是颜色不同导致的图片。

1,添加css样式代码:

wordpress网站后台左侧菜单中选择,外观->自定义->额外CSS->复制CSS粘贴里面即可。在本地或者其他的程序中,直接复制到网页style样式文件中即可,下方css代码中图片链接地址为演示的,url后面的地址需要自己替换自己图片,图片素材文章末尾可下载。

  /** 鼠标样式 开始**/
  /** 普通指针样式**/
  body {
  cursor: url(https://soujiz.com/xxxx/cursor_1.png), default; 
  }
  /** 链接指针样式**/
  a:hover{cursor:url(https://soujiz.com/xxxx/cursor_2.png), pointer; 
  }
  /** 鼠标样式 结束**/

提示:如果不想再移动端显示,可以通过媒体查询限制只能pc端使用

@media screen and (min-width: 850px) {
/*css样式代码填写如下*/

}

2,将上述代码中的两个url中的图片链接地址,换成自己的鼠标样式图标即可,

在自己网站根目录新建一个目录shubiao,然后把本站下载的鼠标样式图片,上传到刚新建的shubiao中,访问地址比如:https://soujiz.com/shubiao/文件名称。替换代码中的图片地址即可完成鼠标美化了。

鼠标素材下载:

本人收集的一些常用的图标分享给大家,欢迎自取。鼠标图标可以根据自己喜好进行选择。

鼠标自定义样式美化-附图标下载插图1

下载地址:

© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币
分享
评论交流 共1条

请登录后发表评论