使用CSS更改光标的不透明度

Question

对于触摸屏应用程序，自定义光标在一段时间未触摸后淡入不透明度= 0，如果再次触摸屏幕，则跳回到不透明度= 1可能很好。

是否有一种方法可以通过一些CSS样式来实现？

update：是否显示光标取决于底层系统（特别是台式机）的处理方式。当我只在裸露的X服务器上使用浏览器时，总是显示光标。

Answer 1

可以使用.png或.svg创建不透明的光标。

以下是示例片段：

.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;
}

<div class="transparent_cursor"></div>

设计时请牢记：

• 使用的图像的可见“指针尖端”应从上方开始左上角。
• If图像需要嵌入到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}
}

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