纯CSS3和SVG超逼真下雨动画效果

这是一款纯CSS3和SVG超逼真下雨动画效果。该下雨动画特效中，雨滴使用SVG生成，并配合CSS3的帧动画，实现非常逼真的下雨动画。

使用方法

HTML代码

每一个雨滴或雨水线条都是一个SVG元素。

<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 8; --y: 2; --o: 0.6489085809879083; --a: 1.2192307691129924; --d: 0.9023552431878596; --s: 0.3192900540947956">
<path stroke="none" d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z"></path>
</svg>
......
		

CSS代码

svg配合CSS代码，生成逼真的细雨效果。

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-color: #6c78a9 !important;
  display: flex;
    flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rain__drop {
  -webkit-animation-delay: calc(var(--d) * 1s);
          animation-delay: calc(var(--d) * 1s);
  -webkit-animation-duration: calc(var(--a) * 1s);
          animation-duration: calc(var(--a) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  height: 30px;
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc((var(--y) + 50) * -1px);
}
.rain__drop path {
  fill: #a1c6cc;
  opacity: var(--o);
  transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}
@keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}
		

codepen网址：https://codepen.io/jh3y/pen/WyNdMG