1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端使用自定义图标作为鼠标光标

前端使用自定义图标作为鼠标光标

时间:2018-09-06 04:54:46

相关推荐

前端使用自定义图标作为鼠标光标

老规矩,先上代码:

<!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。

看看效果:

好了,以上就是本次文章的所有内容了,觉得不错的记得点赞收藏加关注呀,我是努力冲击大厂的小韩!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。