用js写一个可以直接用的雪花动效

好的，以下是一个简单的用 JavaScript 实现的雪花动效：

HTML 代码：

<div id="snowflakes-container">
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
</div>

CSS 代码：

#snowflakes-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.snowflake {
  position: absolute;
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: snowflakes 3s linear infinite;
}

@keyframes snowflakes {
  0% {
    transform: translateY(-50px) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

JavaScript 代码：

// 获取雪花容器
const snowflakesContainer = document.getElementById('snowflakes-container');

// 获取屏幕宽度和高度
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

// 循环创建雪花
for (let i = 0; i < 10; i++) {
  const snowflake = document.createElement('div');
  snowflake.classList.add('snowflake');
  snowflake.style.left = Math.random() * screenWidth + 'px';
  snowflake.style.animationDelay = Math.random() * 3 + 's';
  snowflakesContainer.appendChild(snowflake);
}

这段代码会在页面中创建一个雪花容器，然后循环创建 10 个雪花，并设置它们的位置和动画延迟时间。在 CSS 中，我们定义了一个名为 `snowflakes` 的动画，会让雪花从顶部下落到底部，并且旋转一定角度。