css3下雨视频动画

CSS3下雨视频动画是一种非常炫酷的视频特效，它可以让网页内容更生动、更具有吸引力。下面我们来学习如何使用CSS3来制作这种雨滴效果。

.rain {
  position: fixed;
  top: -50%;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("https://d2rhekw5qr4gcj.cloudfront.net/images/hero/uploads/2018/10/rain.png") repeat 0 0;
  animation: rain 1s linear infinite;
  z-index: -1;
}
@keyframes rain {
  0% {
    background-position: 0 0;
    transform: translateY(0);
  }
  100% {
    background-position: 0 1000px;
    transform: translateY(100vh);
  }
}

上面的代码中，我们使用了一个名为“rain”的class来添加下雨效果。我们在这个div中添加了一个背景图片，这里我们使用了一张由雨滴构成的图片。接着我们定义了一个名为“rain”的动画属性，这个动画会给我们的背景图片添加移动效果。我们使用了关键帧@keyframes来定义这个动画。我们使用transform：translateY来移动图片的位置，background-position来控制背景图片的位置。最后我们将这个下雨效果放在body的后面，使背景图片变得模糊。至此，我们的下雨特效就完成了。