本文功能介绍：自定义、定制鼠标光标指针样式！

cursor: url(), auto;

除了浏览器提供的鼠标样式，我们还可以借助 cursor: url() 的特性，即可实现定制自己的鼠标样式！

/* 使用 URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;/* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

cursor 属性为零个或多个<url>值，多个url()的时候它们之间用逗号分隔，最后必填一个cursor的关键字值。每个<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则继续加载下一个图像，如果都无法加载图像或未指定图像，则使用关键字值代表的指针类型。

每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置)，位置相对于图标的左上角。

多 `url()` 例子：

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>
url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个<url>值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。

<x> <y>
可选 x，y 坐标。两个小于 32 的无单位非负数。x 是向左便宜，y 是向上偏移！

实战：

html {cursor: url('./err.xxx') 0 0, url('./mb.svg') 10 10, pointer;
}

注意事项：
1、支持的图像文件类型：png、svg、ico、jpg等。【按理来说`url()`支持的都能使用，自行额外测试】
2、图像文件的像素不得超过32px。
3、最后必填一个cursor的关键字值。
4、url() 和 cursor关键字值都必须要有逗号分隔。
5、 x，y 坐标是两个小于 32 的无单位非负数。x 是向左便宜，y 是向上偏移！

url() 函数

URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。

【css】自定义鼠标光标指针样式-前端相关推荐

CSS(列表+表格+链接+自定义鼠标光标）样式
1.CSS列表样式 1.1 list-style-type属性 (值可取none.circle.square.decimal.disc.lower-alpha) 有序列表:列表项目用数字或者字母来表示 ...
如何使用CSS和JavaScript制作自定义鼠标光标
新钛云服已累计为您分享707篇技术干货您是否曾经访问过一个网站并被其惊人的功能所震撼?其中之一可能是一个很酷的鼠标光标,它不同于您习惯的常规箭头或指针光标. 这确实可以改善用户体验,最近我一直想知道 ...
CSS自定义鼠标指针样式
原文链接: http://davidwalsh.name/css-custom-cursor Demo地址: http://davidwalsh.name/demo/css-custom-cursor ...
css鼠标光标属性样式大全
css鼠标光标属性样式大全
自定义鼠标光标cursor
通过css属性 Cursor:url()自定义鼠标光标. {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头), ...
CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
计算机鼠标样式,告诉你电脑如何更改鼠标的指针样式？
电脑现已成为我们工作.生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到电脑如何更改鼠标的指针样式?的问题,如果我们遇到了电脑如何更改鼠标的指针样式?的情况,该怎么处理怎么才能解决电脑如何更改 ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS自定义鼠标样式
效果图原理 cursor属性: cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状. 使用url,可自定义鼠标图标. cursor: ur ...

【css】自定义鼠标光标指针样式-前端

cursor: url(), auto;

多 `url()` 例子：

实战：

url() 函数

【css】自定义鼠标光标指针样式-前端相关推荐

最新文章

热门文章