给你的Vue网站加料Spark UI边框光束、Glare悬停与Confetti彩带动画实战【免费下载链接】spark-uiExperience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion.项目地址: https://gitcode.com/gh_mirrors/sp/spark-uiSpark UI 是一个基于 Vue 3、TypeScript、Tailwind CSS 和 vueuse/motion 打造的开源动画组件库主打复制即用。本文带你实战三个最有氛围感的组件Border Beam 边框光束、Glare Hover 悬停眩光和 Confetti 彩带用它们给你的 Vue 网站快速注入高级感 ✨为什么选这三个动画组件组件视觉效果典型场景Border Beam光带沿边框无限流动卡片、按钮、音乐播放器Glare Hover鼠标悬停时高光扫过CTA 按钮、卡片、提示框ConfettiCanvas 粒子彩带喷发注册成功、节日活动、庆祝时刻三者共同点零复杂依赖、纯 CSS/Canvas 驱动、Props 全中文档化新手几分钟就能接入。官方组件文档border-beam.md · glare-hover.md · confetti.md边框光束 Border Beam让卡片边框活起来Border Beam 的效果是一条渐变色光带沿着容器边框做无限循环运动非常适合突出核心卡片或按钮。原理一句话给容器加一个offsetPath为矩形路径的渐变光斑再用 CSS 动画驱动offset-distance从 0 走到 100%核心实现见 border-beam.vue。最快配置方法把组件源码复制进项目后在tailwind.config.js中补上 keyframes 即可跑起来theme: { extend: { keyframes: { border-beam: { to: { offset-distance: 100% } }, }, animation: { border-beam: border-beam calc(var(--duration) * 1s) infinite linear, }, }, }常用 Props 一览完整定义见 border-beam.vueProp默认值说明size50光带大小pxduration6动画时长秒colorFrom/colorTo#ffaa40/#9c40ff渐变起止色reversefalse是否反向运动borderWidth1边框宽度px想要按钮流光效果直接参考官方示例 demo-4.vue多光束叠放可看音乐播放器示例 demo-2.vue。Glare 悬停眩光鼠标划过自带高光Glare Hover 模拟了玻璃/金属表面的反光鼠标悬停时一道斜向高光从一角扫到对角。原理一句话用一个::before伪元素承载linear-gradient高光条悬停时通过background-position从-100%过渡到100%无需额外全局 keyframes核心实现见 glare-hover.vue。新手必调的 4 个参数angle高光角度默认-45度size高光条占宽比例默认250duration扫光时长ms默认650playOnce设为true时仅在悬停瞬间播放一次典型用法包一层 CTA 按钮圆角交给classGlareHover classrounded-lg divHover to see the glare sweep/div /GlareHoverCTA 按钮和 Alert 提示框的完整示例分别在 cta-demo.vue 与 alert-demo.vue改两个颜色参数就能贴合你的品牌色 Confetti 彩带一键制造庆祝时刻Confetti 适合用户做对了一件特别的事的时刻——注册成功、支付完成、节日活动。它基于canvas-confetti用 Canvas 绘制粒子支持 Web Worker 保证流畅度。安装依赖唯一需要额外安装的包pnpm add canvas-confetti组件由两部分组成源码见 confetti.vue 与 confetti-button.vueConfetti挂载一个全屏 canvas并暴露fire(options)方法随时按需发射彩带ConfettiButton点击按钮即从按钮中心喷出粒子适合撒花按钮关键选项速查选项默认值说明particleCount50粒子数量angle/spread90 / 45发射角度与扩散范围shapes[square,circle,star]粒子形状可换 emojiorigin{x:0.5,y:0.5}发射起点页面相对坐标官方示例覆盖了基本炮台、随机方向、烟花、两侧炮、星星和 emoji 彩带推荐从烟花效果 fireworks-demo.vue 和 emoji 效果 emoji-demo.vue 入手。组合实战给落地页加料的 3 步走首屏卡片核心功能卡片套上 Border Beam橙紫渐变边框自带科技感CTA 按钮用 Glare Hover 包一层悬停高光引导点击成功页/弹窗表单提交成功后调用fire()撒一波 Confetti三个组件互不干扰Border Beam 只加 CSS 动画Glare 只用伪元素Confetti 用独立 canvas可以叠加在同一页面上而不冲突 准备环境与文件速查安装指南installation.md组件源码目录docs/content/src/components/spark-ui/示例源码目录docs/content/src/example/需要浏览完整仓库时执行git clone https://gitcode.com/gh_mirrors/sp/spark-uiSpark UI 共提供 50 个动画组件Border Beam、Glare Hover 和 Confetti 只是其中最容易上手的三个。挑一个你心仪的复制、粘贴、调参几分钟就能让你的 Vue 网站氛围感拉满 【免费下载链接】spark-uiExperience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion.项目地址: https://gitcode.com/gh_mirrors/sp/spark-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考