利用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;  
}

效果是下面这样:

这里我使用的鼠标风格是在业界鼎鼎有名的 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/ 这上面的鼠标指针风格不能说清新脱俗吧,但是也比那些烂大街的杀马特造型要好看多了。

相关文章
|
15天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
4天前
|
前端开发 JavaScript UED
|
21天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
110 1
|
30天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
40 2
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
9天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
25天前
|
前端开发
CSS中如何实现鼠标悬停效果?
CSS中如何实现鼠标悬停效果?
33 0
|
1月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
36 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果