当前位置：首页 > VUE

vue实现文字无限缩小

2026-02-22 12:12:50VUE

Vue 实现文字无限缩小效果

在 Vue 中实现文字无限缩小效果可以通过 CSS 动画结合 Vue 的动态绑定完成。以下是两种常见实现方式：

vue实现文字无限缩小

使用 CSS 动画 + v-bind

通过 Vue 动态绑定样式，结合 CSS 的 transform: scale() 属性实现缩放：

vue实现文字无限缩小

<template>
  <div class="container">
    <div 
      :style="{ 
        transform: `scale(${scale})`, 
        transition: 'transform 0.5s ease' 
      }"
      @animationiteration="handleAnimationIteration"
    >
      需要缩小的文字
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      minScale: 0.1,
      step: 0.1
    }
  },
  methods: {
    startShrinking() {
      const timer = setInterval(() => {
        if (this.scale > this.minScale) {
          this.scale -= this.step
        } else {
          clearInterval(timer)
        }
      }, 500)
    }
  },
  mounted() {
    this.startShrinking()
  }
}
</script>

使用纯 CSS 动画

通过 @keyframes 定义无限缩小的动画效果：

<template>
  <div class="shrink-text">
    无限缩小的文字
  </div>
</template>

<style>
.shrink-text {
  animation: shrink 5s infinite;
  transform-origin: center;
}

@keyframes shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(0.1);
  }
}
</style>

动态控制动画

如果需要通过用户交互控制动画：

<template>
  <div>
    <button @click="toggleAnimation">
      {{ isPlaying ? '暂停' : '开始' }}动画
    </button>
    <div 
      :class="{ 'shrink-animation': isPlaying }"
      class="animated-text"
    >
      可控缩小的文字
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false
    }
  },
  methods: {
    toggleAnimation() {
      this.isPlaying = !this.isPlaying
    }
  }
}
</script>

<style>
.animated-text {
  font-size: 24px;
  transition: transform 0.3s;
}

.shrink-animation {
  animation: shrink 2s infinite alternate;
}

@keyframes shrink {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.1);
  }
}
</style>