用css的cursor属性来DIY鼠标指针样式

2018年5月3日14:18:13 发表评论 259 阅读
摘要

我们在浏览网页的时候,可能会看到有些网站的鼠标样式很特殊,这其实是运用了css的cursor属性,通过改变属性的值来达到的效果。可能会有人不是很清楚css的cursor属性怎么设置,本文主要介绍一下cursor属性,以及他的语法和一个小例子,用代码来实现鼠标指针样式。

表格来自于W3school:

描述
url 需使用的自定义光标的 URL。

注意:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

以上表格内容,看着属性很多,大部分了解即可,我们要实现一个样式只用到其中两三个就可以了。除了系统默认鼠标指针样式外,可以通过CSS设置光标为鼠标指针。

具体代码如下:

可以先在本地调试成功,再上传至服务器。

  1. /**普通指针样式**/
  2. body{cursor:url(你的鼠标指针样式地址),default; }//默认鼠标效果
  3. /**链接指针样式**/
  4. a:hover{cursor:url(你的鼠标指针样式地址),pointer;}//链接选择效果

遇到的好看的鼠标指针样式:

用css的cursor属性来DIY鼠标指针样式

用css的cursor属性来DIY鼠标指针样式

注意:.ani后缀的动态光标不兼容部分浏览器,.cur目前没有发现兼容问题。

文末,有下载地址。


 

 

文件下载 鼠标指针样式.zip
下载地址
weinxin
来找我玩~
这是我的微信扫一扫~
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛