【动画进阶】神奇的 3D 卡片反光闪烁动效 - ChokCoco
内容提要
本文介绍了如何使用 CSS 和 JavaScript 创建 3D 卡片的 Hover 动效。通过鼠标移动事件，卡片可以根据鼠标位置旋转，并利用 CSS 变量和混合模式实现光泽效果。读者可以尝试不同的渐变和混合模式组合，创造多样的样式。
延伸解读
实现原理：CSS 3D 与鼠标事件的结合
文章通过分解鼠标移动对卡片旋转的影响，分别计算 X 轴和 Y 轴的旋转角度。核心公式基于鼠标坐标与卡片中心点的偏移量，并引入倍数控制旋转幅度。使用 requestAnimationFrame 优化动画性能，确保每一帧只渲染一次。同时，通过 mouseleave 事件和 transition 实现平滑复位，避免鼠标离开后卡片停留在旋转状态。
光泽效果：混合模式与动态 CSS 变量
光泽效果通过伪元素叠加黑白渐变，并应用 mix-blend-mode: color-dodge 实现。为了跟随鼠标动态变化，文章引入 CSS 变量 --per，根据鼠标横向位置计算百分比，动态调整渐变中高光的位置。这样，光泽会随着鼠标移动而移动，增强交互的真实感。
扩展与自定义：渐变与混合模式的组合
文章展示了如何通过更换不同的渐变背景和混合模式来创造多样化的效果。例如，叠加星星闪烁的 GIF 图，并在 hover 时显示，进一步丰富视觉表现。读者可以自由组合渐变和混合模式，探索更多有趣的样式，但需注意保持性能与兼容性。
Q&A
如何使用 CSS 和 JavaScript 创建 3D 卡片的 Hover 动效？
通过结合 CSS 3D 和 JavaScript，利用鼠标移动事件控制卡片的旋转，并使用 CSS 变量和混合模式实现光泽效果。
在实现 3D 卡片效果时，如何优化动画效果？
可以使用 requestAnimationFrame 来优化动画效果，确保每一帧渲染一次动画。
如何让卡片在鼠标离开时平滑复位？
通过添加 mouseleave 事件和 CSS transition，使卡片在鼠标离开时平滑复位到原始状态。
如何利用混合模式实现卡片的光泽效果？
通过叠加黑白渐变和图片，并调整混合模式为 color-dodge 来实现光泽效果。
如何动态调整卡片的光泽效果？
可以使用 CSS 变量，根据鼠标位置动态调整光泽效果的渐变参数。
在实现 3D 卡片效果时，如何处理鼠标移动事件？
通过绑定 onmousemove 事件，计算鼠标位置与卡片的相对位置，从而控制卡片的旋转。
