zzy-background-animation

Vue3 背景动画组件，支持粒子效果、视差滚动、脉冲光晕、扫描线、网格动画、光波扩散、故障艺术等多种特效。

⚠️ 注意：本组件仅支持 Vue 3 项目

安装

npm install zzy-background-animation

环境要求

• Vue ^3.0.0
• TypeScript（推荐）

使用

全局注册

import { createApp } from 'vue'
import ZBackgroundAnimation from 'zzy-background-animation'

const app = createApp(App)
app.use(ZBackgroundAnimation)

局部导入

import { ZBackground } from 'zzy-background-animation'

基础用法

<ZBackground bgImage="/path/to/your/image.png">
  <div>你的页面内容</div>
</ZBackground>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | enablePulse | boolean | false | 脉冲光晕效果 | | enableScan | boolean | false | 扫描线效果 | | enableParticles | boolean | true | 粒子系统 | | enableGrid | boolean | true | 透视网格动画 | | enableRipple | boolean | false | 光波扩散效果 | | enableGlitch | boolean | false | 故障艺术效果 | | enableParallax | boolean | true | 视差滚动效果 | | enableCursorGlow | boolean | false | 鼠标跟随光效 | | particleCount | number | 50 | 粒子数量 | | bgImage | string | '' | 背景图片路径 | | showControls | boolean | false | 显示控制面板 |

示例

启用所有效果

<ZBackground 
  bgImage="/bg.png"
  enablePulse={true}
  enableScan={true}
  enableParticles={true}
  enableGrid={true}
  enableRipple={true}
  enableGlitch={true}
  enableParallax={true}
  enableCursorGlow={true}
  particleCount={100}
  showControls={true}
>
  <div>内容</div>
</ZBackground>

仅粒子效果

<ZBackground 
  bgImage="/bg.png"
  enableParticles={true}
  enableGrid={false}
  particleCount={80}
>
  <div>内容</div>
</ZBackground>

本地开发

# 克隆项目
git clone <repo-url>
cd zzy-background-animation

# 安装依赖
npm install

# 运行示例
npm run example

示例项目位于 example 目录，包含完整的组件演示。

License

MIT