css3 动画下雪

CSS3动画可以帮助开发者实现许多有趣的效果，其中下雪效果是非常受欢迎的。下面我们将演示如何使用CSS3动画实现下雪效果。

/* 关键帧动画 */
@keyframes sNow {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(1000px) rotate(360deg);
  }
}

/* 雪花样式 */
.sNow {
  display: block;
  position: absolute;
  top: -31px;
  background: url('sNowflake.png') center center no-repeat;
  width: 31px;
  height: 31px;
  animation: sNow linear infinite;
}

/* 随机生成雪花 */
// JavaScript代码
function createSNow() {
  const sNow = document.createElement('div');
  sNow.className = 'sNow';
  sNow.style.left = Math.random() * window.innerWidth + 'px';

  document.body.appendChild(sNow);

  setTimeout(() => {
    sNow.remove();
  },5000);
}

setInterval(createSNow,1000);

以上代码中，我们首先定义了一个keyframes关键字下的动画sNow。其中，我们设置了雪花雪落的初始状态和结束状态在纵坐标上移动1000px并绕圆心旋转360度。

其次，我们定义了一个.sNow类，用于设置雪花样式，在页面显示时，我们将雪花设置为绝对定位，并且使用了我们在前面定义的动画sNow。

最后，我们在JavaScript代码中定义了一个用于生成随机雪花的函数，并且使用setInterval方法每1000ms执行一次生成函数，直到页面关闭。生成函数调用了我们前面定义好的.sNow类，用于在页面上生成雪花效果。

通过使用CSS3动画和JavaScript配合生成随机雪花，我们可以非常快速而有趣地实现下雪效果，让网站变得更加生动有趣。