使用 css 更改光标不透明度答案

【问题标题】：Change cursor opacity with css使用 css 更改光标不透明度
【发布时间】：2020-03-13 04:31:06
【问题描述】：

对于触摸屏应用程序，在一段时间未触摸屏幕后让自定义光标淡化为 opacity = 0 并在再次触摸屏幕时跳回 opacity = 1 可能会很好。

有没有办法通过一些 css 样式来实现这一点？

更新：光标是否显示取决于底层系统（特别是桌面）的处理。由于我只在裸 X-Server 上使用浏览器，因此始终显示光标。

【问题讨论】：

没有 javascript 没有不可能 ;)
在触摸屏设备上没有鼠标图标...

标签： css

【解决方案1】：

虽然cursor: none 是简单隐藏光标的最简单方法，但也可以使用 .png 或 .svg 创建具有不透明度的光标。

这里是一个例子 sn-p:

.transparent_cursor {
  /* div appearance */
  width: 128px; height: 128px; background-color: #def; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVQYlWNgYGD4j4YxAB0UDICVKAoAQagf4Vf1Xw0AAAAASUVORK5CYII=");
  
  /* custom cursor */
  cursor: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22pointer_cursor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2221px%22%20height%3D%2233px%22%20viewBox%3D%220%200%2021%2033%22%20enable-background%3D%22new%200%200%2021%2033%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20id%3D%22outer%22%20opacity%3D%220.5%22%20fill%3D%22%23FFFFFF%22%20points%3D%2220.2%2C20.2%2012.25%2C20.2%2016%2C29%209.667%2C31.75%205.75%2C22.5%200%2C28%200%2C0%20%22%2F%3E%3Cpolygon%20id%3D%22inner%22%20opacity%3D%220.5%22%20fill%3D%22%23231F20%22%20points%3D%226.373%2C19.482%201.75%2C23.904%201.75%2C4.225%2015.975%2C18.45%209.602%2C18.45%2013.708%2C28.087%2010.59%2C29.441%20%22%2F%3E%3C%2Fsvg%3E"), auto;
}

&lt;div class="transparent_cursor"&gt;&lt;/div&gt;

设计时要注意：

所用图像的可见“指针提示”应从上部开始左角。
如果图像需要嵌入到 CSS 本身中，您需要 base64 encode - 或者您也可以 URL encode 获取 SVG。 Using SVG without encoding 在我的测试中没有工作。
分辨率将以 CSS 像素为单位，因此在 Retina 显示屏上看起来很糟糕。即使使用 SVG 也是如此，因为浏览器似乎想要在 CSS 像素中进行光栅化。太糟糕了。
fallback value 等游标, auto 需要包含在url() 之后。详情here。

至于动画 CSS URL，我能够找到 an example 了解如何实现这一点。这是它的要点：

@keyframes cursor_fade_out {
    0% {cursor: url('cursor_opac100.svg'), auto}
    25% {cursor: url('cursor_opac75.svg'), auto}
    50% {cursor: url('cursor_opac50.svg'), auto}
    75% {cursor: url('cursor_opac25.svg'), auto}
    100% {cursor: url('cursor_opac0.svg'), auto}
}

因此您需要在每个不透明度级别为光标创建一个图像。

【讨论】：