卡片悬停动效

在 UI 设计中，为卡片添加悬停动效是一种常见的交互方式。结合 Anime.js，可以轻松实现平滑的视觉反馈，如：

• 缩放放大
• 投影浮起
• 旋转/倾斜

示例：卡片放大 + 阴影动效

card.addEventListener('mouseenter', function () {
  anime({
    targets: card,
    scale: 1.05,
    boxShadow: '0 10px 20px rgba(0,0,0,0.2)',
    duration: 300,
    easing: 'easeOutQuad'
  });
});

card.addEventListener('mouseleave', function () {
  anime({
    targets: card,
    scale: 1,
    boxShadow: '0 0px 0px rgba(0,0,0,0)',
    duration: 300,
    easing: 'easeOutQuad'
  });
});

小结

卡片悬停动画是一种低成本但高回报的 UI 增强方式，推荐在卡片式内容中普遍使用。

示例演示

loading