鼠标移动高亮边框

这篇文章将带你一步步拆解一个视觉美观且交互友好的卡片网格页面。我们将通过 HTML、CSS 和 JavaScript 的结合，实现一种光点会根据鼠标位置移动的炫酷卡片效果。

HTML 结构搭建

首先我们来构建基础的 HTML 页面，包含 head 和 body 部分，并在页面中添加一个 .container 容器，容器里放置多个 .card 卡片。

📦 每张卡片中有一个 .inner 子元素，用于展示卡片的内容和视觉层次。

🎨 页面布局整体采用深色背景，使用 Flex 布局实现容器居中排列：

效果如下：.inner实现了类似边框的效果

背景光点实现

这一部分是核心，重点在于通过伪元素为卡片添加高亮光点效果。

🎯 .inner 已经具备边框视觉效果，而我们要实现的“光点”，其实是通过 .card 的 ::before 伪元素完成的。

效果如下：

为了更直观地看到这个光点元素的实际位置，我们可以临时给伪元素添加一个 transform 位移，测试位置偏移是否生效。

可能看起来还是有点模糊？这时我们给 .card 加上 overflow: hidden，只显示卡片区域内的光点内容，立刻见效！

✨ 现在，高亮效果就清晰可见了！

JavaScript 添加交互

现在我们要做的，是让光点能够跟随鼠标移动，实现真正的交互反馈。

🧠 实现思路：

1. 给每张 .card 设置两个 CSS 自定义变量：--x 和 --y；
2. 使用 JavaScript 监听鼠标移动事件；
3. 计算鼠标相对于每张卡片中心的偏移；
4. 通过 element.style.setProperty() 实时更新 --x 和 --y 的值；
5. 伪元素通过 transform 使用变量，实现光点实时跟随。

🧪 效果展示

最终效果是鼠标移动时，每张卡片内部会根据光标位置显示出一个淡白色的光圈，增强视觉反馈。

📦 源码获取

源码在这里 有趣的动画效果

欢迎 Fork & Star，也可以自己扩展更多特效，比如缩放、阴影、颜色渐变等！

🛠 项目将持续更新：
后续会不断加入更多交互动效，敬请期待！