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

那么作为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. 尾递归与 memorize 优化

    尾递归与 memorize 优化 本文写于 2020 年 12 月 10 日 递归 递归是一种非常常见的算法思维,在大家刚开始学编程的时候应该就会接触到. 我们可以这么理解递归: function 讲 ...

  2. MySQL深入学习-day1

    书名<MySQL是怎样运行的:从根儿上理解MySQL>可自行百度 以下是知识点总结 重新认识Mysql MySQL是一个C/S架构的软件. 在Windows安装后首先注册成服务,然后会在开 ...

  3. 好客租房30-事件绑定this指向（箭头函数）

    1箭头函数 利用箭头函数自身不绑定this的特点 //导入react     import React from 'react'           import ReactDOM from 'rea ...

  4. 141_Power Query之获取钉钉审批流自动刷新Power BI报告

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 钉钉办公给很多企业带来了很多方便,比如审批流线上化,通用化.线上化填写后,数据自动获取又是一个硬伤了,虽然数据可 ...

  5. Kafka 消费者解析

    一.消费者相关概念 1.1 消费组&消费者 消费者: 消费者从订阅的主题消费消息,消费消息的偏移量保存在Kafka的名字是__consumer_offsets的主题中 消费者还可以将⾃⼰的偏移 ...

  6. “摆地摊“都找不到全栈工程师？JNPF帮你分分钟搞定！

    大街上捕捉野生程序员 都这样了还找不到全栈工程师 全栈工程师(Full-Stack Engineer)图鉴: 全栈工程师,也叫全端工程师(同时具备前端和后台能力),英文Full Stack  deve ...

  7. LowDB采坑记录（主要为lowdb3.0的Cannot find module和lowdb1.0 node不断自启动的问题）

    bug1: Error [ERR_ MODULE_ NOT_ FOUND]: Cannot find module 在使用最新版LowDB(3.0)时,发现typescript中直接引用模块名(如以下 ...

  8. 二进制固件函数劫持术-DYNAMIC

    背景介绍  固件系统中的二进制文件依赖于特定的系统环境执行,针对固件的研究在没有足够的资金的支持下需要通过固件的模拟来执行二进制文件程序.依赖于特定硬件环境的固件无法完整模拟,需要hook掉其中依赖于 ...

  9. 在 4GB 物理内存的机器上，申请 8G 内存会怎么样？

    作者:小林coding 计算机八股文刷题网站:https://xiaolincoding.com/ 大家好,我是小林. 看到读者在群里讨论这些面试题: 其中,第一个问题「在 4GB 物理内存的机器上, ...

  10. 线程安全性-原子性之synchronized锁

    原子性提供了互斥访问:同一时刻只能有一个线程进行操作: 除了Atomic包类之外,还有锁可以实现此功能: synchronized:  java关键字,依赖于jvm实现锁功能,被此关键字所修饰的,都是 ...