Question

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

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

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

Answer 1

虽然cursor: none是简单地隐藏光标的最简单方法，但也可以使用.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>

设计时请牢记：

所用图像的可见“指针尖”应从上方开始左上角。
如果需要将图像嵌入CSS本身，则需要base64 encode-或URL encode来使用SVG。 Using SVG without encoding 没有在我的测试中起作用。
分辨率为CSS像素，因此在Retina显示屏上看起来不佳。即使使用SVG，也是如此，因为浏览器似乎希望以CSS像素进行栅格化。闷闷不乐。
在, auto之后需要包含光标fallback value，例如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}
}

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

用css更改光标不透明度

1 个答案:

设计时请牢记：