3

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

 1 year ago
source link: https://v3u.cn/a_id_139
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

首页 - Web Design/2020-03-17
利用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;
}

效果是下面这样:

    

20200317190314_81125.gif

    这里我使用的鼠标风格是在业界鼎鼎有名的 Breeze

    

20200317190321_66168.jpg

    当然了由于不同浏览器所支持的光标文件格式不尽相同，Opera和IE仅支持 .cur 格式，Firefox、Chrome和Safari既支持 .cur 格式，也支持常见的 .jpg、.gif、.jpg 等格式。

    所以从通用性的角度来看，.cur格式是最保险的，不过也不用担心，如果出现不兼容的情况，系统会选择默认的样式。

    值得一提的是，对于.cur文件来说，尺寸最好选择不大于于32*32像素的，因为通过样式进行样式的加载会损耗一些网页性能，同时过大的光标也会影响用户的点选。

    最后，如果手里有.cur的鼠标光标图片样式，这些图片不仅仅可以应用在web网站上，像电脑系统也可以使用比如win10,ubuntu或者mac,这里推荐一个鼠标指针风格网站的下载地址：https://zhutix.com/tag/cursors/   这上面的鼠标指针风格不能说清新脱俗吧，但是也比那些烂大街的杀马特造型要好看多了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK