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> 123456789101112131415

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

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>

123456789101112131415161718192021

在 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>

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

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

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

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

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

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

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

结论

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

网址：Vue3实现闪烁文本组件 https://www.yuejiaxmz.com/news/view/63438

相关内容

基于微信小程序的智慧校园平台的设计与实现(源码+lw+部署文档+讲解等)
“import ... =“ 只能在typescript 文件中使用（解决方法）
家庭电源闪停问题排查与解决建议
乘庙底沟之风，追溯古时文化｜医护学院组织开展传统文化学习教育活动
暑假作文：我发现了环保小窍门
极简生活：4个低成本生活技巧，不花钱也能让生活闪闪发光
闪电音频剪辑软件官方电脑版
软件著作权申请教程（超详细）（2024新版）软著申请
生活中的一件小事作文（优秀3篇）
《日本生活的艺术》 | 生活，就是一件艺术品

随便看看