基于Vue3实现一个简单的雪花漂浮效果

npm init vue@latest

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

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