返回

点亮代码：揭开 JavaScript 30 天编码挑战的第 16 天秘密

前端

在 JavaScript 30 天编码挑战的激动人心的旅程中，我们来到了第 16 天，今天我们将潜入 CSS 的世界，探索如何使用它来创建一种令人惊叹的视觉效果——跟随鼠标移动的阴影 。

设置舞台：HTML

我们从创建一个简单的 HTML 文档开始，如下所示：

<!DOCTYPE html>
<html>
  <head>
    
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="shadow"></div>
  </body>
</html>

在这个 HTML 结构中，我们定义了一个 <div> 元素，其 id 为“shadow”，它将成为我们的阴影元素。

CSS 盒模型：定义阴影的形状

现在，让我们进入 CSS 领域。CSS 盒模型为我们提供了控制元素大小、边框和边距的能力。我们将使用它来定义阴影的大小和形状：

#shadow {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
}

在这里，我们设置了阴影的宽度、高度、背景颜色和边框半径，使其成为一个圆形阴影。我们还将其定位为绝对的，以便它可以跟随鼠标移动。

事件处理器：捕捉鼠标移动

下一步，我们使用 JavaScript 事件处理器来捕捉鼠标移动，并相应地更新阴影的位置。我们使用 addEventListener() 方法来监听 mousemove 事件，并使用 pageX 和 pageY 属性来获取鼠标当前的位置：

document.addEventListener("mousemove", (e) => {
  const shadow = document.getElementById("shadow");
  shadow.style.left = e.pageX + "px";
  shadow.style.top = e.pageY + "px";
});

此代码会持续监听鼠标移动，并实时更新阴影的 left 和 top 属性，使其始终跟随鼠标。

风格优化：添加额外的效果

为了进一步增强阴影效果，我们可以添加一些额外的 CSS 样式：

#shadow {
  box-shadow: 0px 0px 5px #888;
  transition: all 0.2s ease-in-out;
}

这将为阴影添加一个微妙的阴影，并使其在鼠标移动时平滑过渡。

总结

通过将 CSS 盒模型与 JavaScript 事件处理器相结合，我们成功创建了一个跟随鼠标移动的阴影效果。此技术可以应用于各种交互式 Web 元素，为您的应用程序增添趣味和魅力。