在 Vue 3 中实现雪花漂浮效果：打造冬日氛围的网页动画随着冬季的到来，许多网站和应用程序都会添加一些节日氛围的元素，

🎓 作者简介： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: YANG_TAO_WEB@163.com 📩

💬 个人微信: y_t_t_t_ 📱

📌 座右铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

随着冬季的到来，许多网站和应用程序都会添加一些节日氛围的元素，比如雪花飘落的效果。本文将教你如何在 Vue 3 中实现一个简单的雪花漂浮效果，为你的网页增添一丝冬日的浪漫。

效果预览

在开始之前，我们先来看一下最终效果：

雪花从页面顶部随机位置飘落到底部。
雪花的大小、速度和起始位置都是随机的。
页面背景色为透明色，雪花为白色，整体效果非常美观。

实现思路

我们将使用 Vue 3 的 Composition API 动态生成雪花，并结合 CSS 实现动画效果。具体步骤如下：

创建雪花容器：使用 HTML 和 CSS 设置雪花的样式和动画。
动态生成雪花：使用 JavaScript 动态生成雪花，并随机设置它们的大小、位置和动画延迟。
在 Vue 3 中集成：将上述逻辑封装成一个 Vue 组件，方便在项目中复用。

实现步骤

1. 创建 Vue 3 项目

如果你还没有 Vue 3 项目，可以通过以下命令创建一个：

npm init vue@latest

然后按照提示完成项目初始化。

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

// 雪花数组
const snowflakes = ref([]);

// 创建雪花
function createSnowflake() {
  const snowflake = {
    style: {
      left: `${Math.random() * 100}%`, // 随机水平位置
      fontSize: `${Math.random() * 20 + 10}px`, // 随机大小（10px - 30px）
      animationDuration: `${Math.random() * 5 + 5}s`, // 随机动画时长（5s - 10s）
      animationDelay: `${Math.random() * 5}s`, // 随机动画延迟（0s - 5s）
    },
  };
  snowflakes.value.push(snowflake);

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

// 定时生成雪花
let interval;
onMounted(() => {
  interval = setInterval(createSnowflake, 100); // 每 100ms 生成一个雪花
});

// 组件卸载时清除定时器
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 />
    <!-- 其他内容 -->
  </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>

代码说明

模板部分：
- 使用 v-for 动态渲染雪花元素。
- 每个雪花的样式通过 :style 动态绑定。
逻辑部分：
- 使用 ref 创建 snowflakes 数组，用于存储所有雪花的数据。
- createSnowflake 函数用于生成雪花，并随机设置其位置、大小、动画时长和延迟。
- 使用 setTimeout 在雪花动画结束后移除雪花。
- 在 onMounted 生命周期钩子中启动定时器，每隔 100ms 生成一个雪花。
- 在 onUnmounted 生命周期钩子中清除定时器，避免内存泄漏。
样式部分：
- .snow-container 是雪花容器，设置了背景色和高度。
- .snowflake 是雪花的样式，使用 position: absolute 定位。
- @keyframes fall 定义了雪花从顶部飘落到底部的动画。

扩展

使用图片代替雪花符号：如果需要更复杂的雪花效果，可以使用图片代替 ❄ 符号。
调整雪花密度：可以通过调整 setInterval 的时间间隔，控制雪花的密度。
添加更多动画效果：比如雪花旋转或左右飘动，可以通过修改 CSS 动画实现。

结语

通过本文的介绍，你已经学会了如何在 Vue 3 中实现一个简单的雪花漂浮效果。希望这个效果能为你的网页增添一丝冬日的浪漫氛围。如果你有任何问题或建议，欢迎在评论区留言！