个人网站如何在CSS中自定义鼠标样式

阿豪运维笔记 21-10-31 793阅读

温馨提示:这篇文章已超过206天没有更新,请注意相关的内容是否还可用!

前言

想着美化下自己的个人部落格,那就先从鼠标样式开始美化吧,默认的鼠标样式有点单调,那应该如何美化呢?

鼠标样式

1、首先下载鼠标样式(博客系统中一般用的都是系统默认的鼠标和点击链接的样式,我们点击访问致美化提供的鼠标样式https://zhutix.com/tag/cursors/)

image.png

教学内容

PS:一般用.cur格式的(ani格式的不起作用)。有能力的也可以自己PS两张鼠标样式

2、把喜欢的鼠标样式下载到本地,然后上传到网站目录下,比如图片存放目录或者主题images的文件夹中(鼠标样式存储样式可以随意,不限制)

3、站长这边以本站博客为例,进入博客后台主题设置 >> 首页设置 >> 自定义CSS >> 填写如下CSS(其他博客或者网站自行修改style.css样式表即可)

/*鼠标样式开始*/
/*鼠标指针样式*/
body{cursor:url(/zb_users/upload/img/pointer.cur),default;}
/*鼠标链接指针样式*/
a:hover{cursor:url(/zb_users/upload/img/link.cur),pointer;}
/*鼠标样式结束*/

注意鼠标样式路径修改为刚刚上传的存放目录路径

4、清空浏览器缓存(如有CDN,则更新CDNstyle.css文件缓存

5、效果预览

image.gif

文章版权声明:除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

Zblog如何自定义后台登入地址

网页文字打字机效果插入一段文字(逐字出现循环回退删除)

网站如何设置动态标题

Flv西瓜播放器(XGPlayer-flv)视频代码如何调用

个人网站如何添加添加时光轴记录页面

友情链接如何自动获取并添加favicon.ico小图标

ThinkPHP3.2的Runtime/Logs目录下产生大量Log文件的解决办法

分享一个自己在用的Hopelee · 希望(心动之选)主题一些美化设置

取消
微信二维码
微信二维码
支付宝二维码