Vue3 实现光源跟随鼠标并添加 3D 视差效果 —— 完整实战教程

type

status

date

slug

summary

核心技术剖析：动画实现的基本思路

这个效果的实现思路其实非常清晰，主要可以分解为以下几个关键步骤：

DOM结构与定位：

卡片（.item）：使用相对定位 (position: relative)。

光影（动态创建的div）：使用绝对定位 (position: absolute)，使其相对于卡片进行定位。

鼠标事件监听 (Event Listeners)：

mouseenter：当鼠标指针进入卡片区域时，显示光影。

mousemove (核心)：当鼠标在卡片上移动时，实时更新光影的left和topCSS属性，实现光影跟随鼠标的效果。

mouseleave：当鼠标指针离开卡片区域时，隐藏光影。

CSS效果实现：

光影的模糊效果：通过CSS的 filter: blur() 属性实现。

3D视差效果：利用CSS3的 transform 属性，特别是 perspective, rotateX, rotateY。

首先，我们在 Index.vue 文件中搭建基础的卡片HTML结构和初始CSS样式。

(HTML与CSS基础骨架 - 代码截图)

当前的静态效果如下：

(静态卡片预览 - 图片)

步骤一：实现光影跟随鼠标移动

在动手编码之前，有几个重要的细节需要注意：

视觉裁剪：当鼠标移入卡片时，应设置卡片的 overflow: hidden 样式，这样光影效果就不会溢出卡片边界，使视觉效果更佳。鼠标移出时，记得还原此样式。

坐标系选择：获取鼠标坐标时，应使用 event.clientX 和 event.clientY。这两个属性提供的是相对于浏览器视口的坐标，相比 pageX/Y（相对于整个文档的坐标），在处理滚动页面时更为精确和严谨。

mouseenter 和 mouseleave 事件的逻辑相对简单（主要是显示/隐藏光影和设置overflow），真正的核心在于 mousemove 事件的处理函数。

关键问题：如何精确计算光影相对于卡片的位置？

为了直观地理解计算方法，我绘制了下面这张图：

(光影定位计算原理图 - 图片)

计算公式如下：

光影的 left = event.clientX - 卡片左侧偏移量(x) - 光影宽度 / 2

光影的 top = event.clientY - 卡片顶部偏移量(y) - 光影高度 / 2 (注意：这里原文是height，根据上下文应为top，且公式中是光影高度)

基于此逻辑，我们封装一个Vue3 Composition API的自定义Hook use-light-card.ts：

(use-light-card.ts Hook核心逻辑 - 代码截图)

然后在 Index.vue 组件中使用这个Hook：

(在Vue组件中使用Hook - 代码截图)

至此，光影跟随鼠标的基础效果就实现了！

(光影跟随效果预览 - GIF)

步骤二：锦上添花——实现卡片3D视差效果

为了让卡片更具立体感和交互趣味性，我们需要添加3D视差效果。这主要通过CSS的 transform 属性来实现，涉及以下几个关键子属性：

perspective: 定义3D元素的透视效果，数值越小，透视效果越明显。

rotateX: 使元素围绕其X轴进行旋转。

rotateY: 使元素围绕其Y轴进行旋转。

scale3d: 在X、Y、Z三个轴上对元素进行缩放（本例中可能未使用或值为1,1,1）。

在 use-light-card.ts 的 onMouseMove 函数中增加以下逻辑来计算并应用旋转角度：

(3D视差效果实现逻辑 - 代码截图)

加入3D视差效果后，卡片会根据鼠标位置产生微妙的倾斜，大大增强了沉浸感。

(3D视差卡片效果预览 - GIF)

步骤三：多卡片应用与Hook的复用性

我们的 useLightCard Hook 设计之初就考虑了复用性。现在，我们可以轻松地将这个效果应用到页面上的多个卡片。

(多卡片应用示例代码 - 代码截图)

多个卡片同时拥有光影跟随和3D视差效果：

(多卡片效果预览 - GIF)

步骤四：提升灵活性——让光影效果可配置

为了让 useLightCard Hook 更加通用和强大，我们引入了配置项，允许开发者为每个卡片定制不同颜色、大小、模糊程度的光影。

(可配置光影效果预览 - GIF)

我们希望在使用Hook时，通过传递一个配置对象来设定光影样式，而不需要在组件模板中手动编写光影的DOM结构或CSS。

(通过配置对象使用Hook - 代码截图)

这意味着Hook内部需要通过JavaScript DOM API（如 document.createElement, appendChild, removeChild）来动态创建、添加和移除光影元素，并根据配置设置其样式。

(Hook内部动态操作DOM实现配置化 - 代码截图)

完整源码展示

下面是实现该效果的完整代码，包括 Index.vue 组件和 use-light-card.ts 自定义Hook。

`Index.vue` (主组件)

`use-light-card.ts` (自定义Hook)

总结与展望：Vue3动画开发的无限可能

通过本篇教程，我们不仅学习了如何在Vue3中实现一个引人注目的光影跟随与3D视差卡片动画，更深入理解了Vue3 Composition API在封装复杂交互逻辑方面的优势。这个效果可以广泛应用于产品展示、作品集、交互式仪表盘等多种场景，有效提升网站的视觉吸引力和用户参与度。

核心知识点回顾：

Vue3 Composition API：优雅地组织和复用组件逻辑。

JavaScript事件处理：精确监听和响应鼠标交互。

DOM操作：动态创建和管理光影元素。

CSS3 transform 与 filter：实现高级视觉效果。

前端动画的世界广阔无垠，这只是冰山一角。希望本文能激发你对前端动效设计与实现的兴趣。未来，我将继续分享更多关于Vue3、前端性能优化、以及创新交互设计的实战经验。

欢迎大家在评论区交流想法，或者分享你在项目中遇到的有趣动画需求！