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

老规矩，先上代码:

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

看看效果:

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

前端使用自定义图标作为鼠标光标相关推荐

java createcustomcursor,CustomCursor插件：自定义你的鼠标光标
Custom Cursor for Chrome 在你们新标签页争奇斗艳的时候,有没有人考虑过鼠标光标的感受? 没有,一个都没有. 你们只在乎壁纸有没有逼格,图标好不好看,天气预报准不准,却没有一 ...
【css】自定义鼠标光标指针样式-前端
本文功能介绍:自定义.定制鼠标光标指针样式! cursor: url(), auto; 除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式! /* ...
android 4.4 自定义广播,Android 4.4.2 系统自定义鼠标光标替换接口实现
一.需求背景新项目开发,需预置"天翼云电脑"app,云电脑app界面里其实就是盒子端接入的鼠标和键盘外设,来操作云端的windows系统桌面: 云电脑客户端使用的android系 ...
CSS(列表+表格+链接+自定义鼠标光标）样式
1.CSS列表样式 1.1 list-style-type属性 (值可取none.circle.square.decimal.disc.lower-alpha) 有序列表:列表项目用数字或者字母来表示 ...
自定义鼠标光标cursor
通过css属性 Cursor:url()自定义鼠标光标. {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头), ...
如何使用CSS和JavaScript制作自定义鼠标光标
新钛云服已累计为您分享707篇技术干货您是否曾经访问过一个网站并被其惊人的功能所震撼?其中之一可能是一个很酷的鼠标光标,它不同于您习惯的常规箭头或指针光标. 这确实可以改善用户体验,最近我一直想知道 ...
centos7点击桌面图标无反应_【问题帖】电脑不显示桌面图标和任务栏，只显示鼠标光标咋办？...
本帖首发于:360官网.360安全卫士服务号.原作者:Yimoo1314 "电脑不显示桌面图标和任务栏,只显示鼠标光标"问题解决方案-安全资讯-360官网www.360.cnht ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
鼠标图标怎么自定义_苹果ios14怎么自定义图标图标位置自由排列换风格教程
苹果ios14怎么自定义图标图标位置自由排列换风格教程 iOS 14 发布后,自定义主屏幕图标成为了一种流行的趋势,一些用户通过「快捷指令」将默认的应用图标替换为自定义图标,然后将应用本来的图标隐藏 ...

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

老规矩，先上代码:

解析：

看看效果:

前端使用自定义图标作为鼠标光标相关推荐

最新文章

热门文章