卡片悬停动效

在 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 增强方式，推荐在卡片式内容中普遍使用。

示例演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。