Vue3实现闪烁文本组件

本文将使用 Vue 3 和 Tailwind CSS 实现一个简单的“闪烁文本”组件，它在文本周围随机生成“闪烁”的星星效果，为文本增添了一些动感和趣味。本文将介绍该组件的核心实现逻辑及关键代码，帮助您快速理解和应用类似的效果。

实现效果预览（点击查看动态效果）

组件功能介绍

该组件的功能是显示一段文字，并在文字周围生成随机位置的“星星”✨，星星会以渐隐、渐现的方式闪烁。组件的核心部分包括以下功能：

• 动态设置星星的数量和位置。
• 通过 CSS 动画控制星星的闪烁效果。
• 支持在 Vue 3 环境中复用并灵活配置。

实现步骤

1. 创建 SparklesText 组件

首先，我们创建一个 Vue 3 组件并定义基本结构。代码中的 <span> 元素用于显示主文本，并包含星星的动画效果。

<template>
  <span class="sparkles-text relative inline-block text-primary-500">
    {{ text }}
    <ClientOnly>
      <span
          v-for="n in sparklesCount"
          :key="n"
          class="sparkle absolute text-base opacity-0"
          :style="randomPositionStyles[n]"
      >
        ✨
      </span>
    </ClientOnly>
  </span>
</template>

组件结构包含以下几个关键点：

• text: 通过 props 传入的主文本内容。
• sparklesCount: 控制星星的数量，默认为 3。
• ClientOnly: 用于确保星星效果只在客户端渲染，避免 SSR（服务端渲染）时带来的潜在问题。
• v-for: 循环生成星星，并随机分布在文字区域内。

2. 定义 props 和随机样式生成逻辑

在 <script setup> 中，我们定义了两个 props:

• text: 需要展示的文本。
• sparklesCount: 生成的星星数量。

此外，我们还使用 computed 生成星星的随机位置样式，使得每个星星在不同的位置和不同的时间点闪烁：

<script setup>
const props = defineProps({
  text: {
    type: String,
    required: true
  },
  sparklesCount: {
    type: Number,
    default: 3 // 默认星星数量
  }
});

// 生成每个星星的随机样式
const randomPositionStyles = computed(() => {
  return Array.from({length: props.sparklesCount}, () => ({
    top: `${Math.random() * 100}%`,
    left: `${Math.random() * 100}%`,
    animationDelay: `${Math.random() * 2}s`
  }));
});
</script>

在 randomPositionStyles 计算属性中，每次渲染都会为每个星星生成随机的 top 和 left，同时也设定了不同的 animationDelay，使每个星星在不同的时间闪烁，带来更自然的效果。

3. 使用 Tailwind CSS 和关键帧动画实现闪烁效果

在 <style scoped> 中，定义星星的 CSS 动画：

<style scoped>
.sparkle {
  animation: sparkle 1.5s infinite;
}

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

• @keyframes sparkle: 定义星星的闪烁动画，从 opacity: 0 到 opacity: 1 再到 opacity: 0 的过程，模拟星星的“闪烁”效果。
• scale: 通过 transform: scale() 实现缩放效果，使得闪烁的过程更加立体。

使用示例

在项目中引用 SparklesText 组件，并传入您希望显示的文本：

<SparklesText text="Hello, World!" :sparklesCount="5" />

上面的代码会生成 5 颗闪烁的星星，围绕“Hello, World!” 文字。您可以调整 sparklesCount 来增加或减少星星的数量。

如果要修改文本的样式，直接传入对应的class即可：

<SparklesText text="Hello, World!" class="text-xl text-nowrap font-semibold"/>

上面的代码会对文本进行加粗，设置文字大小为20px。

结论

通过这个组件，我们可以为文本增加一些视觉吸引力，让它在页面中显得更加活泼。组件还可以进行进一步优化和扩展，比如支持更多的动画效果或其他类型的装饰元素。希望闪烁本文能为您的 Vue 3 项目带来一些灵感！