vue实现文字闪烁（附多个Demo）

1. 单色闪

在 mounted 钩子函数中，启动了一个定时器，每隔指定的时间间隔切换 isBlinking 的值，以触发文字的闪烁效果

在 beforeDestroy 钩子函数中，清除了定时器，以防止内存泄漏

最后，在组件的模板中根据 isBlinking 的值来决定是否渲染文本，并为文本添加了闪烁的CSS动画

<template>
  <div class="blinking-text" v-if="isBlinking">{{ text }}</div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Blinking Text' // 默认显示的文本
    },
    blinkInterval: {
      type: Number,
      default: 500 // 闪烁的时间间隔（毫秒）
    }
  },
  data() {
    return {
      isBlinking: true
    };
  },
  mounted() {
    // 在组件挂载后启动文字闪烁的定时器
    this.blinkTimer = setInterval(() => {
      this.isBlinking = !this.isBlinking;
    }, this.blinkInterval);
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器
    clearInterval(this.blinkTimer);
  }
};
</script>

<style scoped>
.blinking-text {
  animation: blink-animation 1s infinite alternate; /* 添加闪烁动画 */
}

@keyframes blink-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>

也可以在其他组建中使用该组件：

<template>
  <div>
    <BlinkingText :text="$t('blinkText')" :blinkInterval="500"></BlinkingText>
  </div>
</template>

<script>
import BlinkingText from './BlinkingText.vue';

export default {
  components: {
    BlinkingText
  }
};
</script>

2. 渐变闪

<template>
  <div class="gradient-blinking-text">
    <span class="gradient-text">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Gradient Text'
    },
    blinkInterval: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isBlinking: true
    };
  },
  mounted() {
    this.blinkTimer = setInterval(() => {
      this.isBlinking = !this.isBlinking;
    }, this.blinkInterval);
  },
  beforeDestroy() {
    clearInterval(this.blinkTimer);
  }
};
</script>

<style scoped>
.gradient-blinking-text {
  position: relative;
}

.gradient-text {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  animation: gradient-blink-animation 2s infinite alternate; /* 添加渐变色闪烁动画 */
}

@keyframes gradient-blink-animation {
  0% {
    color: #ff0000; /* 红色 */
  }
  20% {
    color: #ffaa00; /* 橙色 */
  }
  40% {
    color: #ffff00; /* 黄色 */
  }
  60% {
    color: #00ff00; /* 绿色 */
  }
  80% {
    color: #0000ff; /* 蓝色 */
  }
  100% {
    color: #aa00ff; /* 紫色 */
  }
}
</style>

3. 五颜六色闪

<template>
  <div class="rainbow-blinking-text">
    <span class="rainbow-text">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Rainbow Text'
    },
    blinkInterval: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      isBlinking: true
    };
  },
  mounted() {
    this.blinkTimer = setInterval(() => {
      this.isBlinking = !this.isBlinking;
    }, this.blinkInterval);
  },
  beforeDestroy() {
    clearInterval(this.blinkTimer);
  }
};
</script>

<style scoped>
.rainbow-blinking-text {
  position: relative;
}

.rainbow-text {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  animation: rainbow-blink-animation 2s infinite alternate; /* 添加彩虹颜色闪烁动画 */
}

@keyframes rainbow-blink-animation {
  0% {
    color: red;
  }
  20% {
    color: orange;
  }
  40% {
    color: yellow;
  }
  60% {
    color: green;
  }
  80% {
    color: blue;
  }
  100% {
    color: purple;
  }
}
</style>