将 Windows 10 鼠标照亮边框效果带入您的网站：CSS 指南

前端

2023-11-24 16:12:37

在最新的 Windows 10 更新中，用户发现了 UI 中一个令人愉悦的细节：开始菜单中的磁贴和设置界面的边框可以在鼠标悬停时感知鼠标位置，显示出一种动态的光芒。这一效果不仅美观，还提升了交互体验。

我们不禁好奇，是否可以使用 CSS 在网站上复制这种效果？答案是肯定的！让我们踏上将 Windows 10 鼠标照亮边框效果带入网络世界的旅程吧。

了解鼠标照亮边框效果

在 Windows 10 中，鼠标照亮边框效果本质上是一种视差效果。当鼠标悬停在某个元素上时，该元素的边框会根据鼠标位置进行位移，给人一种“跟随”鼠标移动的错觉。

用 CSS 实现鼠标照亮边框

要使用 CSS 实现鼠标照亮边框效果，我们需要创建两个嵌套元素：一个包含边框的父元素和一个感知鼠标位置的子元素。

首先，为父元素设置一个固定的边框。然后，为子元素添加 box-shadow 属性，并将其设置为 inset。这会创建一个向内偏移的阴影，形成边框。

接下来，我们需要让子元素感知鼠标位置。我们可以使用 calc() 函数和 linear-gradient() 函数来动态调整阴影的偏移量，使其根据鼠标在父元素内的位置进行移动。

CSS 代码示例

.container {
  position: relative;
  padding: 10px;
  border: 1px solid black;
}

.highlight {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    to right,
    transparent calc(100% - var(--mouse-x)),
    #000000 var(--mouse-x),
    #000000 calc(100% - var(--mouse-y)),
    transparent var(--mouse-y)
  );
  box-shadow: 0 0 0 9999px inset;
}

JavaScript 事件监听

为了让子元素感知鼠标位置，我们需要使用 JavaScript 监听 mousemove 事件。我们可以获取鼠标相对于父元素的位置，并将其存储在自定义 CSS 变量中。

const container = document.querySelector('.container');
const highlight = document.querySelector('.highlight');

container.addEventListener('mousemove', (e) => {
  highlight.style.setProperty('--mouse-x', e.offsetX + 'px');
  highlight.style.setProperty('--mouse-y', e.offsetY + 'px');
});