怎么让到处下雨？

Question

我想仅使用 CSS为我的天气应用程序创建下雨效果。然而，即使我在外观上取得了令人满意的结果，我似乎无法让它们连续覆盖整个屏幕，而不仅仅是随机的块 - 我该怎么做？

body {
  overflow: hidden;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#background.night {
  background: linear-gradient(#0F2129, #47334A);
}

#background>.cloud {
  width: 900px;
  height: 900px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: cloud 10s infinite alternate;
}

#background.rain>.cloud {
  opacity: .5;
}

#background>.cloud:nth-child(even) {
  animation-delay: 3s;
}

#background.night>.cloud {
  background-color: grey;
}

#background.rain>.cloud:before,
#background.rain>.cloud:after {
  animation: rain 1s infinite linear;
  content: '';
  border-radius: 50%;
  display: block;
  height: 6px;
  width: 3px;
  opacity: 1;
  margin-top: 700px;
}

#background.rain>.cloud:after {
  transform: translate(50px);
}

#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
  animation-delay: .3s;
}

@keyframes rain {
  0% {
    box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
  }
  100% {
    box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
  }
}

@keyframes cloud {
  100% {
    transform: translate(-50px) scale(1.05);
  }
}

<div id="background" class="rain night">
  <div class="cloud" style="top: -797.689px; left: -315px;"></div>
  <div class="cloud" style="top: -865.689px; left: -225px;"></div>
  <div class="cloud" style="top: -814.689px; left: -65px;"></div>
  <div class="cloud" style="top: -853.689px; left: 253px;"></div>
  <div class="cloud" style="top: -823.689px; left: 23px;"></div>
  <div class="cloud" style="top: -843.689px; left: 109px;"></div>
</div>

Answer 1

对于radial-gradient您重复的一些随机事件，这是一项很好的工作。不是linear-gradient因为你很难在重复之间创造空间（也许不可能）。

这是一个基本的例子。我们在不同的随机位置使用相同的梯度，并且都会重复：

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
}
html:before {
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
  background:
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px  12px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px  43px;
  background-size:50px 55px;
  animation:rain 0.2s linear infinite;
}
@keyframes rain{
  to {
     transform:translateY(55px); /* Same as the height of the background-size */
  }
}

如果你想要一点点倾斜：

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
}
html:before {
  content:"";
  position:absolute;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + 100px); /* should be bigger than (100% + 55px)*/
  background:
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) -12px 3px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 17px 0,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 6px  12px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 24px 23px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 39px 30px,
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%) 5px  43px;
  background-size:50px 55px;
  animation:rain 0.2s linear infinite;
  transform:skew(-8deg);
}
@keyframes rain{
  to {
     transform:skew(-8deg) translateY(55px); /* Same as the height of the background-size */
  }
}

并使用 CSS 变量轻松控制：

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
  
  --s:2px 8px; /* size of drop of water*/
  --c:#ccc;    /* color of the water*/
  --a:-7deg;   /* control the skewing*/
  --w:50px;    /* width of the pattern*/
  --h:55px;    /* height of the pattern*/
  
   --rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before {
  content:"";
  position:absolute;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
  background:
     var(--rad) -12px 3px,
     var(--rad) 17px 0,
     var(--rad) 6px  12px,
     var(--rad) 24px 23px,
     var(--rad) 39px 30px,
     var(--rad) 5px  43px;
  background-size:var(--w) var(--h);
  animation:rain 0.2s linear infinite;
  transform:skew(var(--a));
}
@keyframes rain{
  to {
     transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
  }
}

您可以考虑使用不同模式的两个图层来制作另一种动画（更随机）

html {
  height:100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow:hidden;
  
  --s:2px 8px; /* size of drop of water*/
  --c:#ccc;    /* color of the water*/
  --a:-7deg;   /* control the skewing*/
  --w:53px;    /* width of the pattern*/
  --h:55px;    /* height of the pattern*/
  
   --rad:radial-gradient(var(--s),var(--c) 100%,transparent 100%)
}
html:before,
html:after{
  content:"";
  position:absolute;
  bottom:0;
  right:-20%;
  left:-20%;
  height:calc(100% + var(--h) + 10px); /* should be bigger than (100% + var(--h))*/
  background:
     var(--rad) -12px 3px,
     var(--rad) 17px 0,
     var(--rad) 6px  12px,
     var(--rad) 24px 23px,
     var(--rad) 39px 30px,
     var(--rad) 5px  43px;
  background-size:var(--w) var(--h);
  animation:rain 0.2s linear infinite;
  transform:skew(var(--a));
}
html:after {
   --h:70px;
   --w:61px;
}
@keyframes rain{
  to {
     transform:skew(var(--a)) translateY(var(--h)); /* Same as the height of the background-size */
  }
}