我在試著創造某種閃光效果。我有一個div(固定的，發光的背景，高度和寬度100%)遮蔽了整個屏幕。在鼠標移動時，我想用手電筒的方式顯示div后面的內容。

我沒有找到一種方法使這個div的一部分透明(不透明度:0)。參見所附示例:

& quot序言& quot鼠標懸停時出現按鈕，gradiant保持在鼠標光標周圍(屏幕截圖上的圓圈太小，我將使其變大)

編輯:為了更好地理解，我創建了一個Codepen。如你所見，固定的輻射梯度。紅色圓圈應該允許透過梯度透視。

let magnifier = document.getElementById('magnifier')
let size = magnifier.offsetWidth

window.addEventListener('mousemove', (e) => {
  magnifier.style.top = e.clientY - (size / 2)+'px'
  magnifier.style.left = e.clientX - (size / 2)+'px'
  
})

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgb(255,215,108);
  background: radial-gradient(circle, rgba(251, 92, 3, 1) 0%, rgba(255,215,108,1) 100%);
}

#magnifier {
  position: absolute;
  background: red;
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  top: -20rem;
  left: -20rem;
}

<h1 class="text-7xl">Coming soon</h1>

<div id="overlay">
  <div id="magnifier"></div>
</div>

你可以嘗試一些帶有嵌入陰影的覆蓋圖來追蹤鼠標的位置。

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
  var eventDoc, doc, body;

  eventDoc = (event.target && event.target.ownerDocument) || document;
  doc = eventDoc.documentElement;
  body = eventDoc.body;

  event.pageX = event.clientX +
    (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
    (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY +
    (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
    (doc && doc.clientTop  || body && body.clientTop  || 0 );

  const spotlight = document.getElementById("spotlight");
  const boundingRect = spotlight.getBoundingClientRect();
  spotlight.style.left = `${event.pageX - boundingRect.width/2}px`
  spotlight.style.top = `${event.pageY - boundingRect.height/2}px`
}

html, body {
  margin: 0;
}

.bigoverlay {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.spotlight {
  border-radius: 50%;
  width: 250vmax;
  height: 250vmax;
  box-shadow: 0 0 5vmax 110vmax inset black;
  position: absolute;
  z-index: -1;
  left: -75vmax;
  top: -75vmax;
}

<div class="bigoverlay" id="bigoverlay">
    <h1>Some hidden text</h1>
    <div class="spotlight" id="spotlight"></div>  
</div>

要創建手電筒效果，在鼠標移動時顯示div后面的內容，可以使用CSS和JavaScript。這里有一個例子

document.addEventListener('mousemove',
  function(event) {
    var flashlight =
      document.querySelector('.flashlight');
    var x = event.clientX;
    var y = event.clientY;
    var radius = 100;
    flashlight.style.backgroundPosition =
      x + 'px ' + y + 'px';
    flashlight.style.backgroundSize =
      radius + 'px ' + radius + 'px';
  });

.flashlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  z-index: 9999;
}

<div class="flashlight"></div>