使用 CSS 为鼠标光标指定颜色

assign color to mouse cursor using CSS

本文关键字：颜色 光标 鼠标 CSS 使用      更新时间：2023-09-26

如何在网页中为鼠标光标分配颜色？

谁能建议我使用任何技术（例如.HTML CSS，JavaScript）来做到这一点？

只是为了增加动态添加游标的可能性，而无需提供图像，而是使用 JavaScript 和 Canvas 在客户端上生成它。

演示包含一个简单的光标，用形状绘制，但这可以很容易地是图像，视频等（画布支持的所有内容）。

小提琴 （5/2016 更新为 Firefox - 从文档移动到元素）。

注意：当光标像本演示中那样频繁地更改时，FireFox 会出现问题 - 更新为每秒仅更改一次。FF在设置新图像时清除光标，但由于新图像需要解码，因此同时显示默认值。Chrome 会等到图像解码完毕后再切换。

无论如何，这只是为了表明可以使用画布完成 - 使用 Chrome 测试演示，不要经常更换鼠标：-）。

动画循环在这里随机更改颜色以演示：

function loop() {
    var color = 'rgb(' + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ','
                       + ((255 * Math.random())|0) + ')';
    makeCursor(color);
    setTimeout(loop, 1000);
}

游标生成器：

function makeCursor(color) {
    // create off-screen canvas
    var cursor = document.createElement('canvas'),
        ctx = cursor.getContext('2d');
    cursor.width = 16;
    cursor.height = 16;
    // draw some shape for sake of demo
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;
    ctx.moveTo(2, 10);
    ctx.lineTo(2, 2);
    ctx.lineTo(10, 2);
    ctx.moveTo(2, 2);
    ctx.lineTo(30, 30)    
    ctx.stroke();
    // set image as cursor (modern browsers can take PNGs as cursor).
    element.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}

使用图像和 CSS cursor属性，我认为不需要 JavaScript heere...

演示 

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

如前所述，我使用了auto它只不过default cursor以防万一您的图像无法加载，就像我们声明多个字体系列一样。

您应该创建/查找自定义光标。然后，使用 cursor CSS 属性将其包含在您的网站上。

这里有一个教程：http://www.axialis.com/tutorials/use-cursors-to-customize-websites.htm

相关文章：