# SnowEffect 雪花背景特效

> 使用 SnowEffect 为 Vue 3 首页横幅、活动专题与节日页面添加 Canvas 雪花背景，了解容器尺寸、定位要求和接入示例。

原始页面：[SnowEffect 雪花背景特效](http://docs.quyongqing.cn/components/snow-effect.html)

## 说明

用于页面氛围装饰的雪花特效组件，适合放在首页横幅、活动专题头图或节日场景背景中。

## 实时预览

当前组件不提供配置项，直接作为背景特效使用即可。

由于内部是绝对定位的 canvas，外层容器建议设置明确高度，并保持相对定位。

## 源码位置

`src/components/snow-effect/index.vue`

## 基本参数

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `无` | `-` | `-` | 当前版本为纯展示特效组件，直接使用即可。 |

## 基本使用方法

```vue
<template>
  <div class="hero-banner">
    <SnowEffect />
    <div class="hero-banner__content">
      <h2>Snow Effect</h2>
      <p>用于页面顶部或活动区域的雪花背景。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import SnowEffect from '@/components/snow-effect/index.vue'
</script>

<style scoped>
.hero-banner {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.hero-banner__content {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  min-height: 280px;
  color: #fff;
  text-align: center;
}
</style>
```

## 代码示例

**Snow Effect 基础示例**

```vue
<template>
  <div class="hero-banner">
    <SnowEffect />
    <div class="hero-banner__content">
      <h2>Snow Effect</h2>
      <p>用于首页氛围装饰的雪花特效。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import SnowEffect from '@/components/snow-effect/index.vue'
</script>

<style scoped>
.hero-banner {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.hero-banner__content {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  min-height: 280px;
  color: #fff;
  text-align: center;
}
</style>
```