vue画一个滚动红色的心型中间写上王孟

好的，以下是一个简单的Vue组件代码，可以实现滚动红色的心型中间写上“王孟”的效果：

<template>
  <div class="heart-container">
    <div class="heart">
      王孟
    </div>
  </div>
</template>

<script>
export default {
  name: "Heart",
  mounted() {
    let heart = document.querySelector(".heart");
    let heartContainer = document.querySelector(".heart-container");

    let animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";

    function createHeart() {
      let heartElement = document.createElement("div");
      heartElement.classList.add("heart-element");
      heartElement.innerHTML = "<div class='heart-shape'></div>";
      heartContainer.appendChild(heartElement);

      let size = Math.floor(Math.random() * 50 + 20);
      heartElement.style.width = size + "px";
      heartElement.style.height = size + "px";
      heartElement.style.left = Math.floor(Math.random() * heartContainer.offsetWidth) + "px";
      heartElement.style.animationDuration = Math.floor(Math.random() * 3 + 2) + "s";

      heartElement.addEventListener(animationEnd, function() {
        heartElement.remove();
      });
    }

    setInterval(createHeart, 200);
  }
}
</script>

<style>
.heart-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: red;
}

.heart-element {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 9999;
  animation-name: heart-burst;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-fill-mode: forwards;
}

.heart-element .heart-shape {
  width: 100%;
  height: 100%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

@keyframes heart-burst {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0.8);
  }
}
</style>

你可以把这段代码复制到一个.vue文件中，然后使用Vue的方式来引入和使用这个组件。注意，为了让这个组件能够正常工作，你需要在项目中引入一个CSS动画库，比如Animate.css。