如何用mix-blend-mode实现鼠标跟随圆形覆盖文本时变为青绿色？

问题说明 #

现有黑色文本（含SVG图标）和一个跟随鼠标移动的紫色圆形（.ball），当前通过mix-blend-mode实现了圆形覆盖文本时的变色效果，但希望变色后的文本颜色为青绿色，而非当前的浅紫色/黄绿色。

解决方案 #

可以通过给圆形添加伪元素的方式，分离圆形的显示颜色和文本混合的变色逻辑：

1. 保留圆形本身的紫色样式，移除原有的mix-blend-mode和filter属性；
2. 给圆形添加一个伪元素，设置为青绿色并使用difference混合模式，置于圆形下方负责与文本产生变色效果；
3. 确保圆形的层级高于伪元素，保证圆形本身显示为紫色。

修改后的CSS代码如下：

div.ball{
  width: 140px;
  height: 140px;

  @media(min-width: 1280px) {
      width: 200px;
      height: 200px;
  }

  @media(min-width: 1568px) {
      width: 268px;
      height: 268px;
  }

  background-color: $primary; /* 保持原有紫色 */
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
  top: -100px;
  left: -100px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1; /* 确保圆形在伪元素上方 */
}

div.ball::before {
  content: '';
  position: absolute;
  inset: 0; /* 填满整个圆形 */
  background-color: #00ffcc; /* 青绿色，可根据需求调整色值 */
  mix-blend-mode: difference;
  z-index: -1; /* 置于圆形下方，仅与文本混合 */
}

原理说明 #

• mix-blend-mode: difference模式下，黑色文本与青绿色伪元素混合时，会直接显示为青绿色（黑色RGB值为(0,0,0)，与青绿色的差值即为青绿色本身）；
• 圆形本身保持紫色并处于上层，伪元素在下方负责变色逻辑，两者互不干扰，同时满足圆形显示紫色、文本覆盖后变青绿色的需求。

内容的提问来源于stack exchange，提问作者bigN