SnowEffect 雪花背景特效

说明

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

实时预览

Snow Effect

文档页内直接预览雪花特效。

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

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

源码位置

src/components/snow-effect/index.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 基础示例点击展开

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