老规矩,先上代码:
<!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。
看看效果:
好了,以上就是本次文章的所有内容了,觉得不错的记得点赞收藏加关注呀,我是努力冲击大厂的小韩!