纯css下雨效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css下雨效果
代码标签：效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  font-family: "Londrina Sketch", cursive;
  position: absolute;
  bottom: 5vmin;
  right: 5vmin;
  z-index: 25;
  -webkit-transform: rotate(-19deg);
          transform: rotate(-19deg);
  font-size: 9vmin;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 5vmin #000;
}

.scene {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(315deg, #8a8e91 0%, #33333f 74%);
}

.window {
  width: 80vmin;
  height: 80vmin;
  border-radius: 2px;
  border: 5vmin solid #888;
  background-color: #888;
  box-shadow: 0 -5vmin 1vmin rgba(0, 0, 0, 0.9), 0 -1vmin 2vmin black;
}

.window__inside {
  width: 70vmin;
  height: 70vmin;
  border-radius: 2px;
  border: 5vmin solid;
  border-top-color: #8c8d91;
  border-bottom-color: #47474f;
  border-left-color: #7e7d83;
  border-right-color: #9d9ea3;
  background-image: linear-gradient(315deg, #65beff 0%, #3047f5 74%);
  position: relative;
  overflow: hidden;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.clouds {
  z-index: 5;
  position: relative;
  height: 100%;
  width: 100%;
}

.cloud {
  position: absolute;
  left: 0;
  -webkit-filter: blur(15px);
          filter: blur(15px);
}

.cloud_type_1 {
  top: -20vmin;
  -webkit-animation: cloud_1_animation 10s linear infinite;
          animation: cloud_1_animation 10s linear infinite;
}
@-webkit-keyframes cloud_1_animation {
  0% {
    -webkit-transform: scale(0.5) translateX(-85vmin);
            transform: scale(0.5) translateX(-85vmin);
  }
  100% {
    -webkit-transform: scale(0.5) translateX(100vmin);
            transform: scale(0.5) translateX(100vmin);
  }
}
@keyframes cloud_1_animation {
  0% {
    -webkit-transform: scale(0.5) translateX(-85vmin);
            transform: scale(0.5) translateX(-85vmin);
  }
  100% {
    -webkit-transform: scale(0.5) translateX(100vmin);
            transform: scale(0.5) translateX(100vmin);
  }
}
.cloud_type_2 {
  top: -30vmin;
  -webkit-animation: cloud_2_animation 15s linear infinite;
          animation: cloud_2_animation 15s linear infinite;
}
@-webkit-keyframes cloud_2_animation {
  0% {
    -webkit-transform: scale(0.7) translateX(-100vmin);
            transform: scale(0.7) translateX(-100vmin);
  }
  100% {
    -webkit-transform: scale(0.7) translateX(100vmin);
            transform: scale(0.7) translateX(100vmin);
  }
}
@keyframes cloud_2_animation {
  0% {
    -webkit-transform: scale(0.7) translateX(-100vmin);
            transform: scale(0.7) translateX(-100vmin);
  }
  100% {
    -webkit-transform: scale(0.7) translateX(100vmin);
            transform: scale(0.7) translateX(100vmin);
  }
}
.cloud_type_3 {
  top: 10vmin;
  -webkit-animation: cloud_3_animation 20s linear infinite;
          animation: cloud_3_animation 20s linear infinite;
}
@-webkit-keyframes cloud_3_animation {
  0% {
    -webkit-transform: scale(1.2) translateX(-100vmin);
            transform: scale(1.2) translateX(-100vmin);
  }
  100% {
    -webkit-transform: scale(1.2) translateX(100vmin);
            transform: scale(1.2) translateX(100vmin);
  }
}
@keyframes cloud_3_animation {
  0% {
    -webkit-transform: scale(1.2) translateX(-100vmin);
            transform: scale(1.2) translateX(-100vmin);
  }
  100% {
    -webkit-transform: scale(1.2) translateX(100vmin);
            transform: scale(1.2) translateX(100vmin);
  }
}
.hill {
  z-index: 15;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40vmin;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}

.speaker {
  z-index: 10;
  position: absolute;
  bottom: 38vmin;
  left: 10vmin;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(20deg) rotateY(15deg) rotate(-15deg);
          transform: rotateX(20deg) rotateY(15deg) rotate(-15deg);
}

.speaker__part {
  position: absolute;
  width: 10vmin;
  text-align: center;
  outline: 1px solid #111;
}

.speaker__part_side_front,
.speaker__part_side_left {
  height: 20vmin;
}

.speaker__part_side_front {
  background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
  -webkit-transform: translateZ(5vmin);
          transform: translateZ(5vmin);
}

.speaker__part_side_left {
  background-image: linear-gradient(315deg, #000 0%, #422419 74%);
  -webkit-transform: rotateY(-90deg) translateZ(5vmin);
          transform: rotateY(-90deg) translateZ(5vmin);
}

.speaker__circle {
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
  -webkit-transform: translateZ(5vmin);
          transform: translateZ(5vmin);
  border-radius: 50%;
  box-shadow: inset 0 0 15px #000;
}
.speaker__circle::after {
  content: "";
  position: absolute;
  top: 2vmin;
  left: 2vmin;
  width: 4vmin;
  height: 4vmin;
  border-radius: 50%;
  background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
  box-shadow: 0 0 15px #000;
  -webkit-animation: speaker_animation 0.7s ease infinite;
          animation: speaker_animation 0.7s ease infinite;
}
@-webkit-keyframes speaker_animation {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes speaker_animation {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.speaker__circle_pos_top {
  top: 1vmin;
  left: 1vmin;
}

.speaker__circle_pos_bottom {
  top: 11vmin;
  left: 1vmin;
}

/**
 * Rain by @jh3y
 * Link: https://codepen.io/jh3y/pen/WyNdMG
 */
.rain {
  z-index: 20;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rain__drop {
  -webkit-animation-delay: calc(var(--d) * 2s);
          animation-delay: calc(var(--d) * 2s);
  -webkit-animation-duration: calc(var(--a) * 2s);
          animation-duration: calc(var(--a) * 2s);
  -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);
  -webkit-transform: scaleY(calc(var(--s) * 1.5));
          transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100vh);
            transform: translateY(100vh);
  }
}
@keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100vh);
            transform: translateY(100vh);
  }
}
</style>

</head>
<body translate="no">
<div class="scene">
<div class="window">
<div class="window__inside">
<div class="clouds">
<svg class="cloud cloud_type_1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="rgba(255, 255, 255, 0.87)" d="M25.7,-38.5C37.2,-37.9,53.1,-38.9,62.6,-32.7C72.1,-26.5,75.3,-13.3,77,1C78.7,15.2,79,30.5,69.6,36.9C60.2,43.2,41.1,40.7,27.9,43.6C14.7,46.6,7.3,55,-1.8,58.2C-11,61.4,-22.1,59.4,-32.3,54.7C-42.4,50,-51.8,42.6,-59.7,33.1C-67.7,23.5,-74.4,11.8,-70.4,2.3C-66.3,-7.1,-51.6,-14.2,-42,-20.9C-32.4,-27.6,-27.8,-34,-21.7,-37.6C-15.5,-41.3,-7.8,-42.4,-0.3,-41.8C7.1,-41.3,14.2,-39.1,25.7,-38.5Z" transform="translate(100 100)"></path>
</svg>
<svg class="cloud cloud_type_2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="rgba(255, 255, 255, 0.87)" d="M35.6,-55.8C48.8,-54.2,63.7,-49.8,73,-40.1C82.2,-30.3,85.7,-15.2,83.9,-1C82.1,13.1,75.1,26.2,67.1,38.2C59.2,50.2,50.4,61.2,39.1,66C27.8,70.8,13.9,69.5,2.2,65.6C-9.4,61.7,-18.8,55.2,-31.4,51.2C-44.1,47.1,-60,45.5,-61.9,37.4C-63.7,29.2,-51.5,14.6,-49,1.4C-46.5,-11.7,-53.7,-23.5,-50.5,-29.2C-47.2,-34.9,-33.5,-34.5,-23.3,-37.8C-13.1,-41.1,-6.6,-48.1,2.3,-52.1C11.3,-56.2,22.5,-57.4,35.6,-55.8Z" transform="translate(100 100)"></path>
</svg>
<svg class="cloud cloud_type_3" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="rgba(255, 255, 255, 0.87)" d="M31.9,-46.6C45,-47.7,61.9,-46.6,70.8,-38.4C79.7,-30.3,80.6,-15.2,78.8,-1.1C76.9,13,72.3,26.1,62.6,32.8C52.9,39.5,38.1,39.9,26.8,42.4C15.5,44.9,7.8,49.5,0.7,48.3C-6.4,47.1,-12.8,40.2,-19.2,34.9C-25.5,29.6,-31.9,25.8,-43.8,20.2C-55.8,14.7,-73.3,7.3,-77.4,-2.3C-81.4,-12,-71.9,-24,-63.2,-35.2C-54.5,-46.4,-46.6,-56.8,-36.2,-57.2C-25.8,-57.6,-12.9,-48.1,-1.8,-45.1C9.4,-42,18.8,-45.4,31.9,-46.6Z" transform="translate(100 100)"></path>
</svg>
</div>
<svg class="hill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<defs>
<linearGradient id="hill_fill_gradient" ="" x1="0%" y1="0%" x2="75%" y2="45%">
<stop offset="0%" style="stop-color: #a6e630;"></stop>
<stop offset="100%" style="stop-color: #1F7C11;"></stop>
</linearGradient>
</defs>
<path fill="url(#hill_fill_gradient)" fill-opacity="1" d="M0,192L48,176C96,160,192,128,288,106.7C384,85,480,75,576,64C672,53,768,43,864,58.7C960,75,1056,117,1152,149.3C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div class="speaker">
<div class="speaker__part speaker__part_side_front"></div>
<div class="speaker__part speaker__part_side_left"></div>
<div class="speaker__circle speaker__circle_pos_top"></div>
<div class="speaker__circle speaker__circle_pos_bottom"></div>
</div>
<h1>The Rain</h1>


<div class="rain">
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 42; --y: 37; --o: 0.6650017050222969; --a: 0.8704051571669458; --d: -0.915019752401208; --s: 0.6807101939072115">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 78; --y: 78; --o: 0.9950417278760624; --a: 1.4337817244665887; --d: 0.11832967267482619; --s: 0.24455504058667543">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 27; --y: 9; --o: 0.9234835795064342; --a: 1.0194062587673378; --d: -0.9050988212869537; --s: 0.34877894148600297">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 64; --y: 27; --o: 0.4223373592239452; --a: 0.7039480345714177; --d: -0.5269245164011247; --s: 0.04929447367402884">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 56; --y: 31; --o: 0.4345169884328295; --a: 1.314332954985754; --d: 0.0016487235653714905; --s: 0.9331600361868118">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 95; --y: 77; --o: 0.7223531662805236; --a: 0.9906874908295515; --d: -0.9442484953208603; --s: 0.683505633972199">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 60; --y: 69; --o: 0.03332044232881337; --a: 1.237234714605607; --d: -0.6655472228745616; --s: 0.5261261541241717">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 58; --y: 11; --o: 0.7902688096068775; --a: 0.7038031684506667; --d: -0.836810132021474; --s: 0.9796045841801213">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 7; --y: 51; --o: 0.17490014157318323; --a: 1.000357291851392; --d: -0.2816705786270499; --s: 0.4572243312897444">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 26; --y: 22; --o: 0.8638869108368701; --a: 1.2126706033017276; --d: -0.6064957743209214; --s: 0.20203396286513975">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 88; --y: 14; --o: 0.11809502308432185; --a: 1.0118347151373877; --d: 0.45638857503822683; --s: 0.27327412208296065">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 25; --y: 78; --o: 0.3418506228938152; --a: 0.6329956934843379; --d: 0.9888137682530256; --s: 0.6562564916047289">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 56; --y: 24; --o: 0.2704863446513017; --a: 0.9741333737972218; --d: 0.7491266464245161; --s: 0.38451776137706317">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 40; --y: 71; --o: 0.10353478988194853; --a: 0.5815527104748945; --d: 0.04993832858424474; --s: 0.928217351020393">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 57; --y: 22; --o: 0.39562890460197675; --a: 1.2557329676660176; --d: 0.9681461750159914; --s: 0.8826353379699814">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 14; --y: 90; --o: 0.6626580234768427; --a: 0.6782923250828139; --d: 0.5020747820557654; --s: 0.12145959722854682">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 75; --y: 40; --o: 0.5809368176859746; --a: 1.422016389755804; --d: -0.1837489448523102; --s: 0.9937998624996482">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 85; --y: 79; --o: 0.9422483306326022; --a: 0.9291840000178793; --d: 0.7019653964757926; --s: 0.5795053394379885">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 17; --y: 6; --o: 0.17286206094970447; --a: 1.245984138364821; --d: 0.17478728751038863; --s: 0.168050052428949">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 8; --y: 79; --o: 0.7640386964888599; --a: 0.9413329927050282; --d: 0.17344978946850853; --s: 0.9546547022993923">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 52; --y: 24; --o: 0.5837455005571657; --a: 1.4569710922925765; --d: -0.664887119635345; --s: 0.6905295173020387">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 97; --y: 42; --o: 0.8676956543843035; --a: 0.727554623257556; --d: -0.16568814342279348; --s: 0.5690953439255808">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 26; --y: 70; --o: 0.8090024285662392; --a: 1.3911858312946894; --d: -0.1521779822816942; --s: 0.9142926198819565">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 29; --y: 32; --o: 0.8469053244515856; --a: 1.4695104900091653; --d: -0.024186048567691465; --s: 0.045113511082286006">
<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>
<svg class="rain__drop" preserveAspectRatio="xMinYMin" viewBox="0 0 5 50" style="--x: 92; --y: 42; --o: 0.042634553005476805; --a: 0.6039046624273856; --d.........完整代码请登录后点击上方下载按钮下载查看