css红心点赞写法

<template>
  <div class="wrapper">
    <div
      class="likeBtn"
      style="width: 100px; height: 100px"
      id="likeBtn"
      @mousemove="mousemove"
      @mouseout="mouseout"
      @click="clickMeColor"
    >
      <span class="heart" id="heart"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Table",
  components: {},
  data() {
    return {};
  },
  methods: {
    clickMeColor() {
      //这句有问题，待处理
      const content = document.getElementById("heart");
      for (let i = 0; i < 10; i++) {
        setTimeout(() => {
          const fullHeart = document.createElement("div");
          fullHeart.classList.add("hearts");
          fullHeart.innerHTML = '<span class="heart"></span>';
          fullHeart.style.left = Math.random() * 100 + "%";
          fullHeart.style.top = Math.random() * 100 + "%";
          fullHeart.style.transform = `translate(-50%, -50%) scale(${
            Math.random() + 0.3
          }) `;
          fullHeart.style.animationDuration = Math.random() * 2 + 3 + "s";
          fullHeart.firstChild.style.backgroundColor = "#ed3056";
          content.appendChild(fullHeart);
          setTimeout(() => {
            fullHeart.remove();
          }, 3000);
        }, i * 100);
      }
    },

    mousemove() {
      //const likeBtn = document.getElementById("likeBtn");
      const heart = document.getElementById("heart");
      heart.classList.add("heratPop");
    },
    mouseout() {
      //const likeBtn = document.getElementById("likeBtn");
      const heart = document.getElementById("heart");
      heart.classList.remove("heratPop");
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  margin: 200px;
}

.heart {
  cursor: pointer;
  background-color: #8a93a0;
  height: 13px;
  width: 13px;
  transform: rotate(-45deg) scale(1);
  display: inline-block;
}

.heart::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}
.heart::after {
  content: "";
  position: absolute;
  top: 0;
  right: -50%;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}
.heratPop {
  animation: pulse 1s linear infinite;
}
@keyframes pulse {
  0% {
    transform: rotate(-45deg) scale(1);
  }
  10% {
    transform: rotate(-45deg) scale(1.1);
  }
  20% {
    transform: rotate(-45deg) scale(0.9);
  }
  30% {
    transform: rotate(-45deg) scale(1.2);
  }
  40% {
    transform: rotate(-45deg) scale(0.9);
  }
  50% {
    transform: rotate(-45deg) scale(1.1);
  }
  60% {
    transform: rotate(-45deg) scale(0.9);
  }
  70% {
    transform: rotate(-45deg) scale(1);
  }
}

.hearts {
  position: absolute;
  color: #e7273f;
  font-size: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fly 3s linear forwards;
}
@keyframes fly {
  to {
    transform: translate(-50%, -50px) scale(0);
  }
}
</style>