令人眼前一亮的——鼠标指针自定义
liuian 2025-01-11 15:10 34 浏览
如果经常逛别人博客会发现，有些个人博客鼠标指针并不是系统指针，而是自定义的。这些小细节确实能让人眼前一亮。
研究了下发现实现其实很简单，而且也很常用。
cursor
正是基于这个日常开发中十分常用的鼠标样式属性来实现的。它有个被忽视的属性——url。可以使用url在引入图片或者cur文件来自定义网站的鼠标样式。
注意点
1：如果使用图片自定义，必须使用png，如果使用其它格式的图片将无法加载
2：如果使用图片自定义，大小最好在32*32，不宜过大，过大的图片同样不加载
3：png才是通用的，cur是适用于window的系统指针文件，mac请替换为对应的系统鼠标指针文件格式
如何找鼠标指针文件
1：自制png，如果是公司项目，可以让ui设计
2：美化网站
可以去致美化看看，使用的时候注意版权。
如何使用png/cur文件
其实用法是一样的，都是基于url实现。
cur:
cursor: url(/src/assets/cursor/KUDACursorsSet/Arrow.cur),auto;png:
cursor: url(/src/assets/img/LsCursor.png),auto;如何便捷替换网站内的所有指针
目前没有太好的方案便捷的替换网站内所有的鼠标样式，毕竟cursor也是依赖选择器来实现的，而且cursor属性会被覆盖，不能同一dom添加多个。这就导致只能根据不同选择器来设置不同的鼠标样式，如：
body{
cursor: url(/src/assets/cursor/KUDACursorsSet/Arrow.cur),auto;
/* 文本鼠标指针样式 */
p,span{
cursor: url(/src/assets/cursor/KUDACursorsSet/ArrowUp.cur), text !important;
}
/* 鼠标悬停在链接上时 */
a,button {
cursor: url(/src/assets/cursor/KUDACursorsSet/Link.cur),pointer !important;;
}
}以上样式肯定是不全的，只能大概设置样式。其它样式的设置，方便点的方法是设置class名，哪些dom需要这些样式，手动添加class名称，或者添加全局变量方法(依赖于less/scss)，配合全局样式/全局变量也能稍微方便点。
/* 禁止 */
.cursor_not_allow{
cursor: url(/src/assets/cursor/KUDACursorsSet/notAllow),pointer !important;
}
/* 移动 */
.cursor_move{
cursor: url(/src/assets/cursor/KUDACursorsSet/move),pointer !important;
}
/* 左上角拖拽 */
.cursor_resize_left_top{
cursor: url(/src/assets/cursor/KUDACursorsSet/resizeLeftTop),pointer !important;
}鼠标指针集合
以下是cursor支持的所有鼠标样式：
类型 | CSS 值 | 描述 |
General | auto | 浏览器根据当前内容决定指针样式 |
default | 默认指针，通常是箭头。 | |
none | 无指针被渲染 | |
链接及状态 | context-menu | 指针下有可用内容目录。 |
help | 指示帮助 | |
pointer | 悬浮于连接上时，通常为手 | |
progress | 程序后台繁忙，用户仍可交互 (与wait 相反). | |
wait | 程序繁忙，用户不可交互 (与progress 相反).图标一般为沙漏或者表。 | |
选择 | cell | 指示单元格可被选中 |
crosshair | 交叉指针，通常指示位图中的框选 | |
text | 指示文字可被选中 | |
vertical-text | 指示垂直文字可被选中 | |
拖拽 | alias | 复制或快捷方式将要被创建 |
copy | 指示可复制 | |
move | 被悬浮的物体可被移动 | |
no-drop | 当前位置不能扔下 | |
not-allowed | 不能执行 | |
grab | 可抓取 译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表 | |
grabbing | 抓取中 | |
重设大小及滚动 | all-scroll | 元素可任意方向滚动（平移）. |
col-resize | 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 | |
row-resize | 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头 | |
n-resize | 某条边将被移动。例如元素盒的东南角被移动时使用 se-resize | |
e-resize | ||
s-resize | ||
w-resize | ||
ne-resize | ||
nw-resize | ||
se-resize | ||
sw-resize | ||
ew-resize | 指示双向重新设置大小 | |
ns-resize | ||
nesw-resize | ||
nwse-resize | ||
缩放 | zoom-in | 指示可被放大或缩小 |
zoom-out |
?
相关推荐
- Python中的列表详解及示例_python列表讲解
-
艾瑞巴蒂干货来了，数据列表，骚话没有直接来吧列表(List)是Python中最基本、最常用的数据结构之一，它是一个有序的可变集合，可以包含任意类型的元素。列表的基本特性有序集合：元素按插入顺序存储可变...
- PowerShell一次性替换多个文件的名称
-
告别繁琐的文件重命名，使用PowerShell语言批量修改文件夹中的文件名，让您轻松完成重命名任务在日常工作中，我们经常需要对大量文件进行重命名，以便更好地管理和组织。之前，我们曾介绍过使用Pytho...
- 小白必看!Python 六大数据类型增删改查秘籍，附超详细代码解析
-
在Python中，数据类型可分为可变类型（如列表、字典、集合）和不可变类型（如字符串、元组、数值）。下面针对不同数据类型详细讲解其增删改查操作，并给出代码示例、输出结果及分析总结。1.列表（Li...
- python数据容器之列表、元组、字符串
-
数据容器分为5类，分别是：列表（list）、元组（tuple）、字符串（str）、集合（set）、字典（dict）list#字面量[元素1，元素2，元素3，……]#定义变量变量名称=[元素1，元素...
- python列表(List)必会的13个核心技巧(附实用方法)
-
列表（List）是Python入门的关键步骤，因为它是编程中最常用的数据结构之一。以下是高效掌握列表的核心技巧和实用方法：一、理解列表的本质可变有序集合：可随时修改内容，保持元素顺序混合类型：一个列表...
- 如何利用python批量修改文件名_python如何对文件进行批量命名
-
很多语言都可以做到批量修改文件名，今天我就给大家接受一下Python的方法，首选上需求。图片中有10个txt文件，现在我需要在这些文件名的前面全部加一个“学生”，可以吗？见证奇迹的时刻到了。我是怎么做...
- Python中使用re模块实现正则表达式的替换字符串操作
-
#编程语言#我是"学海无涯自学不惜！"，关注我，一同学习简单易懂的Python编程。0基础学python（83）Python中，导入re模块后还可以进行字符串的替换操作，就是sub()...
- python列表十大常见问题，你遇到第几个?
-
Python列表常见问题及解决方案1.修改列表时的常见陷阱问题：在遍历时修改列表#错误做法：在遍历时删除元素会导致意外结果numbers=[1,2,3,4,5,6]forn...
- python入门007:编辑列表_python列表怎么写入文件
-
一、列表的编辑操作列表创建后，随着程序的运行，可以通过对列表元素的增删改操作来编辑列表。1、修改列表元素的值修改列表元素的操作方法与访问列表元素的方法类似。例如，要修改列表元素的值，先指定列表及元素...
- Python教程:在python中修改元组详解
-
欢迎你来到站长在线的站长学堂学习Python知识，本文学习的是《在Python中修改元组详解》。本知识点主要内容有：在Python中直接使用赋值运算符“=”给元组重新赋值、在Python中使用加赋值运...
- Python列表(List)一文全掌握:核心知识点+20实战练习题
-
Python列表（List）知识点教程一、列表的定义与特性定义：列表是可变的有序集合，用方括号[]定义，元素用逗号分隔。list1=[1,"apple",3.14]lis...
- Python教程-列表复制_python对列表进行复制
-
作为软件开发者，我们总是努力编写干净、简洁、高效的代码。Python列表是一种多功能的数据结构，它允许你存储一个项目的集合。在Python中，列表是可变的，这意味着你可以在创建一个列表后改变它的...
- Python入门学习教程:第 6 章 列表
-
6.1什么是列表？在Python中，列表（List）是一种用于存储多个元素的有序集合，它是最常用的数据结构之一。列表中的元素可以是不同的数据类型，如整数、字符串、浮点数，甚至可以是另一个列表。列...
- Python列表、元组、字典和集合_python中的列表元组和字典
-
Python中的列表（List）、元组（Tuple）、字典（Dict）和集合（Set）是四种最常用的核心数据结构。掌握它们的基础操作只是第一步，真正发挥威力的是那些高级用法和技巧。首先我们先看一下这...
- 学习编程第167天 python编程 使用format方法灵活替换字符串
-
今天学习的是刘金玉老师零基础Python教程第51期，主要内容是python编程使用format方法灵活替换字符串。一、format方法（一）format方法是字符串自带的方法,使用的format方法...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)