js css 实现爱心跳动效果

可以通过以下代码实现爱心跳动效果：

HTML 代码：

<div class="heart">
  <span class="icon-heart"></span>
</div>

CSS 代码：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}

.icon-heart {
  position: absolute;
  width: 100px;
  height: 90px;
  background-image: url(heart.png);
  background-position: 0 0;
  transition: background-position 1s steps(28);
}

.heart:hover .icon-heart {
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}

其中，heart.png 是一个包含 28 个爱心图案的精灵图，每个图案的宽度为 100px，高度为 90px。在 CSS 中通过 background-position 属性控制显示哪个图案，通过 transition 和 animation 属性实现动画效果。当鼠标悬停在爱心区域时，触发动画效果。