使用 CSS 的 mix-blend-mode 製作隨滑鼠移動改變樣式的效果

這是一個簡單的效果示範，這邊我們想要做一個可以隨滑鼠移動，移動的地方下面的樣式也會跟著變換的效果。

首先我們建立一個圖形，我這邊用圓形，然後使用 js 讓他可以隨著滑鼠移動，簡單用 jQuery 寫。

$(window).mousemove(function (e) {
    $(".circle").css({ top: e.pageY, left: e.pageX }); 
  }); 

接著用 CSS 的 mix-blend-mode 設定在這個區塊以下會有圖層混和效果。

.circle{
  width: 60px;
  height: 60px;
  background: #fff;
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

mix-blend-mode 很好用，理論上任何形狀跟圖片都能做圖層混合效果，設定好就完成了。

 簡單完成，有興趣的可以試試看。