# 卡片悬停动效

URL: https://caijiao.org/animejs/5-cases/3-hover-card
Source: docs/animejs/5-cases/3-hover-card.md
Description: 本节介绍如何使用 Anime.js 实现卡片 hover 时的动效，例如放大、浮动、投影等，提升界面交互的视觉反馈。

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

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

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

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

## 示例演示

[在线代码演示](/animejs/demos/13.html)