css实现雪花粒子生成特效

CSS实现雪花粒子生成特效是比较常见的效果，通过CSS样式实现雪花的移动、颜色、大小等特效，让网页更具有节日氛围，下面我们来一起学习一下实现方法。

/* CSS样式 */
.sNow {
  position: absolute; /* 定位 */
  top: -10px; /* 初始位置 */
  left: 0; /* 初始位置 */
  animation: drop 2s linear infinite; /* 动画效果 */
  transform: rotate(45deg) scale(0.75); /* 旋转和大小 */
}

/* 动画 */
@keyframes drop {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  100% {
    transform: translateY(100vh); /* 结束位置 */
  }
}

/* 生成雪花 */
function createSNow() {
  const sNowDiv = document.createElement('div');
  sNowDiv.className = 'sNow';
  const sNowIcon = document.createTextNode('❄');
  sNowDiv.appendChild(sNowIcon);
  document.body.appendChild(sNowDiv);
}

/* 随机生成雪花 */
function createSNows() {
  for (let i = 0; i 

上述代码中，通过CSS样式设置雪花的初始位置、动画、颜色、大小等，同时通过JavaScript生成多个雪花元素，实现雪花粒子的效果。