vue实现跳动的爱心

可以通过CSS动画和Vue的生命周期函数来实现跳动的爱心效果。

首先，在Vue组件中定义一个爱心图标，并设置它的CSS动画：

<template>
  <div class="heart-container">
    <i class="heart"></i>
  </div>
</template>

<style>
.heart-container {
  position: relative;
}

.heart {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: red;
  transform: rotate(-45deg);
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8) rotate(-45deg);
  }
  50% {
    transform: scale(1.2) rotate(-45deg);
  }
  100% {
    transform: scale(0.8) rotate(-45deg);
  }
}
</style>

然后，在Vue组件的`mounted`生命周期函数中，随机生成若干个爱心图标，并随机分配它们的位置和动画延迟时间：

<script>
export default {
  mounted() {
    const heartContainer = this.$el.querySelector('.heart-container');
    const numHearts = 10;
    const maxDelay = 2;
    const maxDuration = 5;

    for (let i = 0; i < numHearts; i++) {
      const heart = document.createElement('i');
      heart.classList.add('heart');
      heart.style.left = Math.random() * 100 + '%';
      heart.style.animationDelay = Math.random() * maxDelay + 's';
      heart.style.animationDuration = Math.random() * maxDuration + 5 + 's';
      heartContainer.appendChild(heart);
    }
  }
};
</script>

这样，组件挂载后就会随机生成多个跳动的爱心图标，每个图标都有自己的位置和动画效果。