利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)
现而今，我们纵向的回顾整个大前端的历史，不难发现，人们对前端的审美要求越来越高，越来越严苛，与此同时，人们对追求美的体验是也极致的，从理性到感性，从平面到几何，从现实到虚拟，所以从某种角度来说，作为前端工程师，他们所追求的东西往往和人类软件核心理念南辕北辙，因为人类的终极追求是个性，绝不是共性，换句话说，大家都一样就不好玩儿了。
那么作为web前端，追求个性的手段手段之一就是鼠标指针的更换，早在css2时代，Cursor属性就可以对象鼠标指针光标进行控制，可以根据自身需要选择设置鼠标指针样式，代码如下：
<head>
<title>cursor属性</title>
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto......</span><br />
<span style="cursor:crosshair">Crosshair......</span><br />
<span style="cursor:default">Default......</span><br />
<span style="cursor:pointer">Pointer......</span><br />
<span style="cursor:move">Move......</span><br />
<span style="cursor:e-resize">e-resize......</span><br />
<span style="cursor:ne-resize">ne-resize......</span><br />
<span style="cursor:nw-resize">nw-resize......</span><br />
<span style="cursor:n-resize">n-resize......</span><br />
<span style="cursor:se-resize">se-resize......</span><br />
<span style="cursor:sw-resize">sw-resize......</span><br />
<span style="cursor:s-resize">s-resize......</span><br />
<span style="cursor:w-resize">w-resize......</span><br />
<span style="cursor:text">text......</span><br />
<span style="cursor:wait">wait......</span><br />
<span style="cursor:help">help......</span>
</body>
</html>不过这些属性仅仅是更换系统自定义的一些默认样式，毫无新意，当然也不能满足所有用户的需求，特别对于一些追求时尚和个性化的Web应用。因此，CSS允许用户创建自己的鼠标光标图片，并保存为 .cur 的光标文件，然后通过 cursor属性来使用它们。如：
cursor: url(cursors/cursor.cur) ;上述规则表示，要求浏览器加载名称为 cursor.cur 光标文件，并将它用作鼠标光标。当然，浏览器也有可能不支持 .cur 格式的光标文件，或光标文件无法正常加载。因此，大多数浏览器要求必须指定一个备用的光标，否则，cursor属性无效。如：
cursor: url(cursors/cursor.cur), pointer;除了更换鼠标指针，我们也可以稍加一些变化，比如鼠标悬停在超链接的时候，语义化操作往往需要给用户一点提示：
a:hover, a:focus, a:active, a.active {
color: #fec503;
cursor:url(././mouse/breeze/Hand.cur), pointer;
}效果是下面这样:
这里我使用的鼠标风格是在业界鼎鼎有名的 Breeze
当然了由于不同浏览器所支持的光标文件格式不尽相同，Opera和IE仅支持 .cur 格式，Firefox、Chrome和Safari既支持 .cur 格式，也支持常见的 .jpg、.gif、.jpg 等格式。
所以从通用性的角度来看，.cur格式是最保险的，不过也不用担心，如果出现不兼容的情况，系统会选择默认的样式。
值得一提的是，对于.cur文件来说，尺寸最好选择不大于于32*32像素的，因为通过样式进行样式的加载会损耗一些网页性能，同时过大的光标也会影响用户的点选。
最后，如果手里有.cur的鼠标光标图片样式，这些图片不仅仅可以应用在web网站上，像电脑系统也可以使用比如win10,ubuntu或者mac,这里推荐一个鼠标指针风格网站的下载地址：https://zhutix.com/tag/cursors/ 这上面的鼠标指针风格不能说清新脱俗吧，但是也比那些烂大街的杀马特造型要好看多了。
原文转载自「刘悦的技术博客」 ( https://v3u.cn/a_id_139 )
利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)的更多相关文章
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 鼠标指针光标样式css cursor default pointer hand url
一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...
- 【css】cursor鼠标指针光标样式知识整理
在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- CSS---cursor 鼠标指针光标样式（形状）
url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4
6 鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- 利用CSS3实现页面淡入动画特效
利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...
- 利用CSS3实现div页面淡入动画特效
利用CSS3实现页面淡入动画特效 摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...
随机推荐
- DirectX11 With Windows SDK--39 阴影技术（VSM、ESM）
前言 上一章我们介绍了级联阴影贴图.刚开始的时候我尝试了给CSM直接加上PCSS,但不管怎么调难以达到说得过去的效果.然后文章越翻越觉得阴影就是一个巨大的坑,考虑到时间关系,本章只实现了方差阴影贴图( ...
- spring boot redis 写入异常
redis 的 key value 使用 json 序列化.反序列化时,写入的 bean 不能是 final 类型的类,否则无法解析
- 11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件
一.RTCDataChannel WebRTC 不但可以让你进行音视频通话,而且还可以用它传输普通的二进制数据,比如说可以利用它实现文本聊天.文件的传输等 WebRTC 的数据通道(RTCDataCh ...
- SQL表的创建
一,创建表 1.使用鼠标创建表 1,进入SQL进行连接 编辑 2,在左边会有一个对象资源管理器,右键数据库,在弹出的窗口中选择新建数据库 编辑 3,给这个包取个名字,在这个界面可以给这个表选 ...
- 在linux上开启酸酸乳，未完待续
在服务器调试深度学习环境的时候总需要下载conda的包,一直以来都觉得是因为国内访问慢,于是想在服务器上开 ,或者ssr.由于过去用ssr多一些,于是想了解ssr on linux. 1.首先win1 ...
- android系统常见问题类型
android系统中常见的异常问题,包括上层应用.框架.内核.驱动等,一般来说有如下一些异常问题类型: ANR,Answer No Response,应用无响应. FC,Force Close,强制退 ...
- 前端 跨站脚本（XSS）攻击的一些问题，解决<script>alert('gansir')</script>
问题1:跨站脚本(XSS)的一些问题,主要漏洞证据: <script>alert('gansir')</script>,对于这个问题怎么解决? (测试应当考虑的前端基础攻击问题 ...
- PyTorch DataSet Normalization torchvision.transforms.Normalize()
特征缩放, 在这种情况下,我们不仅仅考虑是一个值的数据集,我们考虑的是具有多个特征和相关的值的样本或元素的数据集. 假如正在处理一个人的数据集, 归一化数据集有许多不同的 ...
- AsList()方法详解
AsList()方法详解 在Java中,我们应该如何将一个数组array转换为一个List列表并赋初始值?首先想到的肯定是利用List自带的add()方法,先new一个List对象,再使用add()方 ...
- MySQL 千万数据库深分页查询优化，拒绝线上故障！
文章首发在公众号(龙台的技术笔记),之后同步到博客园和个人网站:xiaomage.info 优化项目代码过程中发现一个千万级数据深分页问题,缘由是这样的 库里有一张耗材 MCS_PROD 表,通过同步 ...