CSS cursor 支持 Emoji

2022-06-15 08:46:54 浏览数 (1)

使用 SVG 方式：

在 CSS 中，为了标识出点击、放大等这种特定动作的交互，一般我们会使用:

代码语言：javascript复制
.demo {
  cursor: pointer;
}

除了这种指定常规关键字的方式外，还有一种方式就是指定 URL，Demo 如下：

See the Pen custom cursor by hjoker (@hjoker) on CodePen.

语法如下：

代码语言：javascript复制
cursor: url(one.svg), url(two.svg) 5 5, progress;
  1. 如果指定多个 url()浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型，此处为 progress。
  2. 每个 <url> 后面都可选跟一对空格分隔的数字 <x><y> 表示偏移。它们用来设置指针的热点(即自定义图标的实际点击位置)，位置相对于图标的左上角。

Demo 中左侧区块偏移量设置为 0 0，因此尝试选中的时候，整个图片看起来还没碰到文字就可以选中了。右侧区块设置为 32 32 ，即为图片中心位置，此时图片光标需要在中间位置对齐文字才可以选中。

经过测试，cursor 属性对配置的图片有大小限制：Chrome 上宽高超过 120 px J就无法展示对应的图片。

使用 Emoji ：

除了上述 SVG 、PNG 图片的方式外，还可以展示 Emoji，本质上还是借助 url() svg 的方式。

代码语言：javascript复制
cursor:url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='100' height='120' viewport='0 0 100 100' style='fill:black;font-size:60px;'><text y='50%'>


	


php svg https 网络安全 css 




	






	

 0 人点赞