当前位置：首页 > VUE

vue 实现跳动爱心

2026-01-15 03:51:03VUE

实现跳动爱心的Vue代码示例

在Vue中实现跳动爱心效果，可以通过CSS动画和Vue的动态绑定结合完成。以下是具体实现方式：

vue 实现跳动爱心

基础HTML结构

<template>
  <div class="heart-container">
    <div 
      class="heart" 
      :style="{ transform: `scale(${scale})` }"
      @click="beatHeart"
    ></div>
  </div>
</template>

Vue组件脚本

<script>
export default {
  data() {
    return {
      scale: 1,
      isBeating: false
    }
  },
  methods: {
    beatHeart() {
      if (this.isBeating) return;

      this.isBeating = true;
      this.scale = 1.2;

      setTimeout(() => {
        this.scale = 1;
        this.isBeating = false;
      }, 300);
    }
  }
}
</script>

关键CSS样式

<style>
.heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.heart {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transform: rotate(45deg);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.heart:before,
.heart:after {
  content: '';
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
}

.heart:before {
  top: -50px;
  left: 0;
}

.heart:after {
  top: 0;
  left: -50px;
}
</style>

自动跳动版本

要实现自动跳动效果，可以添加以下修改：

mounted() {
  setInterval(() => {
    this.beatHeart();
  }, 1000);
}

复杂动画效果

更复杂的跳动动画可以通过CSS keyframes实现：

@keyframes heartbeat {
  0% { transform: scale(1) rotate(45deg); }
  25% { transform: scale(1.1) rotate(45deg); }
  50% { transform: scale(1.2) rotate(45deg); }
  75% { transform: scale(1.1) rotate(45deg); }
  100% { transform: scale(1) rotate(45deg); }
}

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

这些代码组合起来就能在Vue中创建出点击跳动或自动跳动的爱心效果。可以根据需要调整颜色、大小和动画时间等参数。

vue 实现跳动爱心