html - 更改 css 中的重叠像素

Question

在某些网站上，光标是某种形状，这很容易做到，用一些跟随鼠标的 css 制作一个 div。

但在其他一些网站上，我看到当光标移动时，它会根据悬停在哪个元素上而逐个像素地进行过滤，例如:

圆圈是光标。当它在红色正方形上方时，那些重叠的像素是青色的，其他的是红色的，剩下的圆圈是原来的白色。

如何在css/js/html中实现

有什么帮助吗？

Answer 1

看看mix-blend-mode .它仍然很新，但在 chrome、firefox 和 opera 中都支持

let img = $("#cursor");

$(document).on('mousemove', function(e){
    img.css({
       left:  e.pageX,
       top:   e.pageY
    });
});

#cursor {
  position: absolute;
  mix-blend-mode: difference;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/200">

<img src="https://picsum.photos/32" id="cursor">