当前位置：首页 > VUE

vue实现文字闪烁效果

2026-02-21 08:31:42VUE

使用 CSS 动画实现文字闪烁

在 Vue 中可以通过 CSS 动画实现文字闪烁效果。定义一个闪烁的动画关键帧，并将其应用到目标元素上。

<template>
  <div class="blinking-text">闪烁的文字</div>
</template>

<style>
.blinking-text {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

使用 Vue 动态绑定样式

通过 Vue 的数据绑定和计算属性动态控制文字闪烁效果。

<template>
  <div :style="{ opacity: isBlinking ? 0 : 1 }">闪烁的文字</div>
</template>

<script>
export default {
  data() {
    return {
      isBlinking: false
    }
  },
  mounted() {
    setInterval(() => {
      this.isBlinking = !this.isBlinking
    }, 500)
  }
}
</script>

使用第三方动画库

Vue 可以结合第三方动画库如 animate.css 实现更丰富的闪烁效果。

<template>
  <div class="animate__animated animate__flash animate__infinite">闪烁的文字</div>
</template>

<script>
import 'animate.css'
export default {}
</script>

自定义闪烁频率和颜色

通过自定义 CSS 变量控制闪烁频率和颜色变化。

<template>
  <div class="custom-blink">自定义闪烁</div>
</template>

<style>
.custom-blink {
  --blink-duration: 0.8s;
  --blink-color: #ff0000;
  animation: custom-blink var(--blink-duration) infinite;
}

@keyframes custom-blink {
  0% { color: inherit; }
  50% { color: var(--blink-color); }
  100% { color: inherit; }
}
</style>

使用 Vue Transition 组件

Vue 的 Transition 组件也可以实现元素显隐的过渡效果。

vue实现文字闪烁效果

<template>
  <transition name="blink">
    <div v-if="show">闪烁过渡效果</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  mounted() {
    setInterval(() => {
      this.show = !this.show
    }, 1000)
  }
}
</script>

<style>
.blink-enter-active, .blink-leave-active {
  transition: opacity 0.5s;
}
.blink-enter, .blink-leave-to {
  opacity: 0;
}
</style>

每种方法适用于不同场景，CSS 动画实现简单性能好，Vue 数据绑定方式更灵活，第三方库提供现成解决方案，Transition 组件适合与 Vue 生态深度集成。