利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)

news/2025/1/12 18:47:56/

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

    那么作为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 )


http://www.ppmy.cn/news/632110.html

相关文章

显示你个性的鼠标指针(转)

显示你个性的鼠标指针(转)[more] 许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象&#xff0c;其实只要一句简单的CSS&#xff08;层叠样式表&#xff09;&#xff0c;你也能在网页上实现这种效果。 实例演示如下&#xff1a; 首先&#xff0c;你需要一个鼠标指针文件&a…

电脑更换光标形状——亲测可用

❤点赞关注加收藏&#xff0c;从此一路不迷茫❤ 最近发现鼠标光标在使用的时候由于它是白色黑边线&#xff0c;所以有时候不好看到光标&#xff0c;决定换个光标 网上搜到不错的推荐了 打开如下网址 鼠标指针 - 光标 - 电脑鼠标指针下载 - 致美化 - 漫锋网提供精美电脑鼠标…

leecode-数组多数-摩尔投票法

题目 题目 分析 最开始思路&#xff1a;排序&#xff0c;然后取nums[n/2]&#xff0c;但是时间复杂度不过关。 摩尔投票法&#xff0c;学到了&#xff01; 代码 class Solution { public:int majorityElement(vector<int>& nums) {//摩尔投票int cnt0;int targ…

ROCKCHIP ~ 查看NPU/GPU/CPU 频率/使用率

输入以下命令挂载 debug&#xff0c;只有挂载 debug 才可以查看 NPU/GPU/CPU 频率使用率。 mount -t debugfs debugfs /sys/kernel/debugmount | grep debugNPU 输入以下命令查看 NPU 频率&#xff1a; cat /sys/kernel/debug/clk/clk_scmi_npu/clk_rateGPU 查看 GPU 频率&…

工业互联网从通讯运营商方面入手

工业互联网从通讯运营商方面入手,积极跟踪国际的标准。在国际最权威的3GPP组织、ITO组织贡献了中国通讯运营商的智慧。在国际标准的基础之上&#xff0c;通讯运营商实现三位一体联动&#xff0c;从国际标准扩展通讯运营商的行业标准和企业规范。 资金政策引领,针对工业物联网的…

江西单招学校计算机类的学校,2019江西单招学校有哪些 哪个学校最好

2019年江西省共59所高校(其中外省1所)开展高职提前单招工作。江西单招学校主要有江西应用科技学院、江西应用科技学院、江西医学高等专科学校、九江职业大学、九江职业技术学院、南昌理工学院等。 江西单招学校人气排名学校名称学科类型学校性质浏览次数 江西应用工程职业学院理…

江西省计算机类大赛,江西省电子信息工程学校-江西省中等职业学校第九届技能竞赛节计算机应用类专业竞赛隆重举行...

2012年4月21日江西省中等职业学校第九届技能竞赛节计算机应用类专业竞赛在江西省电子信息工程学校隆重举行。本次大赛由省教育厅主办&#xff0c;江西省电子信息工程学校承办&#xff0c;南昌大学继续教育学院协办&#xff0c;还得到了相关企业的大力赞助。大赛共有77支代表队&…

江西单招学计算机的学校有哪些,2020年江西单招都有哪些学校

2020年江西单招学校有江西应用科技学院、江西旅游商贸职业学院、南昌理工学院、江西艺术职业学院等。 院校名单 江西应用科技学院 江西旅游商贸职业学院 南昌理工学院 江西艺术职业学院 江西青年职业学院 南昌工学院 九江职业技术学院 江西陶瓷工艺美术职业技术学院 江西工业工…