快捷導(dǎo)航

基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雪花漂浮效果

更新時(shí)間：2025年01月27日 08:10:48 作者：江城開朗的豌豆

隨著冬季的到來(lái),許多網(wǎng)站和應(yīng)用程序都會(huì)添加一些節(jié)日氛圍的元素,比如雪花飄落的效果,本文將教你如何在 Vue 3 中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雪花漂浮效果,為你的網(wǎng)頁(yè)增添一絲冬日的浪漫,感興趣的小伙伴跟著小編一起來(lái)看看吧

效果預(yù)覽

在開始之前，我們先來(lái)看一下最終效果：

雪花從頁(yè)面頂部隨機(jī)位置飄落到底部。
雪花的大小、速度和起始位置都是隨機(jī)的。
頁(yè)面背景色為透明色，雪花為白色，整體效果非常美觀。

實(shí)現(xiàn)思路

我們將使用 Vue 3 的 Composition API 動(dòng)態(tài)生成雪花，并結(jié)合 CSS 實(shí)現(xiàn)動(dòng)畫效果。具體步驟如下：

創(chuàng)建雪花容器：使用 HTML 和 CSS 設(shè)置雪花的樣式和動(dòng)畫。
動(dòng)態(tài)生成雪花：使用 JavaScript 動(dòng)態(tài)生成雪花，并隨機(jī)設(shè)置它們的大小、位置和動(dòng)畫延遲。
在 Vue 3 中集成：將上述邏輯封裝成一個(gè) Vue 組件，方便在項(xiàng)目中復(fù)用。

實(shí)現(xiàn)步驟

1. 創(chuàng)建 Vue 3 項(xiàng)目

如果你還沒(méi)有 Vue 3 項(xiàng)目，可以通過(guò)以下命令創(chuàng)建一個(gè)：

npm init vue@latest

然后按照提示完成項(xiàng)目初始化。

2. 編寫雪花組件

在你的 Vue 組件中（例如 Snowflake.vue），編寫以下代碼：

<template>
  <div class="snow-container">
    <!-- 雪花元素 -->
    <div
      v-for="(snowflake, index) in snowflakes"
      :key="index"
      :style="snowflake.style"
      class="snowflake"
    >
      ?
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 雪花數(shù)組
const snowflakes = ref([]);

// 創(chuàng)建雪花
function createSnowflake() {
  const snowflake = {
    style: {
      left: `${Math.random() * 100}%`, // 隨機(jī)水平位置
      fontSize: `${Math.random() * 20 + 10}px`, // 隨機(jī)大小（10px - 30px）
      animationDuration: `${Math.random() * 5 + 5}s`, // 隨機(jī)動(dòng)畫時(shí)長(zhǎng)（5s - 10s）
      animationDelay: `${Math.random() * 5}s`, // 隨機(jī)動(dòng)畫延遲（0s - 5s）
    },
  };
  snowflakes.value.push(snowflake);

  // 雪花飄落后移除
  setTimeout(() => {
    snowflakes.value = snowflakes.value.filter((item) => item !== snowflake);
  }, parseFloat(snowflake.style.animationDuration) * 1000);
}

// 定時(shí)生成雪花
let interval;
onMounted(() => {
  interval = setInterval(createSnowflake, 100); // 每 100ms 生成一個(gè)雪花
});

// 組件卸載時(shí)清除定時(shí)器
onUnmounted(() => {
  clearInterval(interval);
});
</script>

<style scoped>
.snow-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0a2a43; /* 背景色 */
}

.snowflake {
  position: absolute;
  top: -10%;
  color: #fff; /* 雪花顏色 */
  user-select: none; /* 禁止選中 */
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh); /* 雪花從頂部飄落到底部 */
  }
}
</style>

3. 在主組件中使用雪花組件

在你的主組件（例如 App.vue）中使用 Snowflake.vue 組件：

<template>
  <div id="app">
    <Snowflake />
    <!-- 其他內(nèi)容 -->
  </div>
</template>

<script setup>
import Snowflake from './components/Snowflake.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
</style>

代碼說(shuō)明

模板部分：
- 使用 v-for 動(dòng)態(tài)渲染雪花元素。
- 每個(gè)雪花的樣式通過(guò) :style 動(dòng)態(tài)綁定。
邏輯部分：
- 使用 ref 創(chuàng)建 snowflakes 數(shù)組，用于存儲(chǔ)所有雪花的數(shù)據(jù)。
- createSnowflake 函數(shù)用于生成雪花，并隨機(jī)設(shè)置其位置、大小、動(dòng)畫時(shí)長(zhǎng)和延遲。
- 使用 setTimeout 在雪花動(dòng)畫結(jié)束后移除雪花。
- 在 onMounted 生命周期鉤子中啟動(dòng)定時(shí)器，每隔 100ms 生成一個(gè)雪花。
- 在 onUnmounted 生命周期鉤子中清除定時(shí)器，避免內(nèi)存泄漏。
樣式部分：
- .snow-container 是雪花容器，設(shè)置了背景色和高度。
- .snowflake 是雪花的樣式，使用 position: absolute 定位。
- @keyframes fall 定義了雪花從頂部飄落到底部的動(dòng)畫。

擴(kuò)展

使用圖片代替雪花符號(hào)：如果需要更復(fù)雜的雪花效果，可以使用圖片代替 ? 符號(hào)。
調(diào)整雪花密度：可以通過(guò)調(diào)整 setInterval 的時(shí)間間隔，控制雪花的密度。
添加更多動(dòng)畫效果：比如雪花旋轉(zhuǎn)或左右飄動(dòng)，可以通過(guò)修改 CSS 動(dòng)畫實(shí)現(xiàn)。