实现鼠标指向哪里哪里发光的效果

要实现鼠标指向哪里哪里发光的效果,你可以使用JavaScript和CSS来完成。下面是一个简单的示例代码:

<div id="glow-div"></div>

CSS代码:

#glow-div {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: transparent;
  pointer-events: none; /* 确保鼠标事件不会被该元素阻挡 */
  box-shadow: 0 0 10px 5px #00f; /* 发光效果样式 */
}

JavaScript部分:

document.addEventListener("mousemove", function(event) {
  var glowDiv = document.getElementById("glow-div");
  glowDiv.style.left = (event.pageX - 50) + "px"; // 使发光元素居中于鼠标位置
  glowDiv.style.top = (event.pageY - 50) + "px";
});

通过以上代码,我们创建了一个具有发光效果的圆形元素 glow-div,并使用JavaScript监听鼠标移动事件。每当鼠标移动时,我们根据鼠标位置动态调整 glow-div 元素的位置,使其居中于鼠标位置。

你可以将上述代码复制到HTML文件中并在浏览器中运行,然后移动鼠标,就能看到鼠标指哪里哪里发光的效果。你也可以根据需要自定义样式和调整代码。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 共1条

请登录后发表评论