现而今，我们纵向的回顾整个大前端的历史，不难发现，人们对前端的审美要求越来越高，越来越严苛，与此同时，人们对追求美的体验是也极致的，从理性到感性，从平面到几何，从现实到虚拟，所以从某种角度来说，作为前端工程师，他们所追求的东西往往和人类软件核心理念南辕北辙，因为人类的终极追求是个性，绝不是共性，换句话说，大家都一样就不好玩儿了。

那么作为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来更换自定义个性化鼠标指针(光标)的更多相关文章

  1. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 鼠标指针光标样式css cursor default pointer hand url

    一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...

  3. 【css】cursor鼠标指针光标样式知识整理

    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...

  4. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  5. CSS---cursor 鼠标指针光标样式（形状）

    url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  7. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  8. 利用CSS3实现页面淡入动画特效

    利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...

  9. 利用CSS3实现div页面淡入动画特效

    利用CSS3实现页面淡入动画特效   摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...

随机推荐

  1. 利用ArcEngine开发地图发布服务，将mxd文档一键发布成wmts，并根据需要对地图进行空间查询，返回客户端geojson

    一直想开发一个软件取代ArcGIS Server,该软件使用ArcEngine开发,以Windows Service形式发布,部署在服务端上,解决wmts地图服务发布和空间查询的问题,经过不断的研究. ...

  2. arts-week11

    Algorithm 69. Sqrt(x) - LeetCode Review Building a network attached storage device with a Raspberry ...

  3. 149_1秒获取Power BI Pro帐号

    一.背景 当你来到这篇文章的时候,我想你已经在网上搜索了一圈了.网上有一大把教你如何注册Power BI帐号的方法,我们这里就不在赘述了.因为各种因素的限制确实比较麻烦.我们直接提供Power BI ...

  4. Springmvc基础及应用

    SpringMVC简介和环境搭建 SpringMVC简介 Spring 为展现层提供的基于 MVC 设计理念的优秀的Web 框架,是目前最主流的 MVC 框架之一.在Spring3.0 后全面超越 S ...

  5. while和for循环的补充与数据类型的内置方法(int, float, str)

    目录 while与for循环的补充 while + else 死循环 while的嵌套 for补充 range函数 break与continue与else for循环的嵌套 数据类型的内置方法 int ...

  6. JAVA - 如果hashMap的key是一个自定义的类，怎么办？

    JAVA - 如果hashMap的key是一个自定义的类,怎么办? 使用HashMap,如果key是自定义的类,就必须重写hashcode()和equals().

  7. 接口测试postman深度挖掘应用①

    一.测试接口前需要搞明白的原理: 1.在讲如何使用postman时,我们首先应该要了解网络的请求相应的知识,下面以fiddle进行抓包为例分析: 通过fiddler抓包我们不难发现,客户端也就是用户会 ...

  8. 看看CabloyJS是如何实现编辑页面脏标记的

    应用场景 我们在使用Word.Excel时,当修改了内容之后在标题栏会显示脏标记,从而可以明确的告知用户内容有变动.此外,如果在没有保存的情况下关闭窗口,系统会弹出提示框,让用户选择是否放弃修改 那么 ...

  9. 1.数据结构《Pytorch神经网络高效入门教程》Deeplizard

    当移动一个数组或向量时,我们需要一个索引:二维数组/矩阵需要两个索引, 比如说标量是零维张量,数组/向量/矢量是一维张量,矩阵是是二维张量,n维数组是n维张量. 如果我们被告知,  假设有一个张量t, ...

  10. USB机械键盘改蓝牙键盘

    手里有两把机械键盘,一个是IKBC 87键,一个是IKBC POKER II 60键,由于买的比较早,两把键盘均为USB的,使用起来桌面线比较多,碍事,于是开始研究如何改成蓝牙键盘. 首先说一下USB ...