菜鸟教程
教程 animejs tutorial

卡片悬停动效

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

示例演示

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>卡片悬停动画示例</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
font-family: sans-serif;
}


.card {
  width: 240px;
  height: 140px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #333;
  cursor: pointer;
}



</style>
</head>


<body>
<div class="card">悬停我</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot;&gt;&lt;/script&gt;
<script>
var card = document.querySelector(‘.card’);


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

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



</script>
</body>


</html>

相关内容