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

那么作为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. 好客租房11-为什么脚手架使用jsx语法

    为什么脚手架中可以使用jsx语法 1jsx不是标准的ECMAScript ,他是ECMAScript的语法扩展 2需要使用babel编译处理后 才能在浏览器环境中使用 3create-react-ap ...

  2. final变量、方法与类

    学习内容: 一.final变量 1.设定为final的变量,其值不可被改变. 2.final定义的变量必须在声明时对其进行赋值操作. 3.final可以修饰对象.被修饰为final的对象,只能恒定指向 ...

  3. mysql查询关键字补充与多表查询

    目录 查询关键字补充 having过滤 distinct去重 order by排序 limit分页 regexp正则 多表查询 子查询 连表查询 查询关键字补充 having过滤 关键字having和 ...

  4. python之装饰器补充与递归函数与二分查找

    目录 多层装饰器 有参装饰器 递归函数 基本演示 斐波那契数列 总结 小拓展 算法之二分法 简介 举例 总结 多层装饰器 我们已经知道了语法糖的作用是将装饰对象自动装饰到装饰器中,一个语法糖的应用我们 ...

  5. Fail2ban 简介

    Fail2ban是一个基于日志的IP自动屏蔽工具.可以通过它来防止暴力破解攻击. Fail2ban通过扫描日志文件(例如/var/log/apache/error_log),并禁止恶意IP(太多的密码 ...

  6. JVM的类加载过程

    每日一句 人到情多情转薄,而今真个不多情. 每日一句 The frog in the well knows nothing of the great ocean. 井底之蛙,不知大海. JVM 的类加 ...

  7. 两个月吃透阿里P9推荐260页SpringBoot2企业应用实战pdf入职定P6+

    前言 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...

  8. vscode的一些优化设置

    @ 目录 编辑代码区的字体设置 控制台字体设置 设置文件自动保存 自动猜测文件编码,防止乱码 关闭vscode的受限模式 取消每一次打开vscode都默认打开上次编辑的文件 编辑代码区的字体设置 控制 ...

  9. python基础学习5

    Python的基础学习5 内容概要 流程控制理论 if判断 while循环 内容详情 流程控制理论 # 流程控制:即控制事物执行的流程 # 执行流程的分类 1.顺序结构 从上往下按顺序依次执行 2.分 ...

  10. CF1665A GCD vs LCM