老规矩,先上代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{width: 100vw;height: 100vh;/* 注意url()后面必须跟一种普通的光标,防止url里的地址加载不出来东西,这里我用了default */cursor: url(./download.png),default;}</style></head><body></body></html>
解析:
我们利用CSS中的cursor属性即可,关于这个属性的具体讲解请参考:CSS cursor 属性 | 菜鸟教程
我们直接把这个属性写在body上,就可以保证页面默认的光标是我们自定义的图标了。我们只需要准备一个图片就好了,比如我这里用的(如下图):
就像background-image属性一样,直接使用url()把图片地址放进去就可以了,不过要注意的是后面必须跟一种普通的光标,以防没有由url定义的可用光标。说白了就是防止你写在url里的地址有问题加载不出来导致页面里没有光标。比如上面的代码里我就跟了一个default。
看看效果:
好了,以上就是本次文章的所有内容了,觉得不错的记得点赞收藏加关注呀,我是努力冲击大厂的小韩!