How to make it rain everywhere?

问题

I would like to create a raining-effect for my weather app with CSS-only. However, even though I achieved satisfying results with the look, I can't seem to make them cover the entire screen continuously and not just random chunks of it - how would I go about this?

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>

回答1:

This is a good job for some random radial-gradient that you repeat. Not linear-gradient because you will have a hard time creating spaces between repetition (maybe impossible).

Here is a basic example. We use the same gradient at different random position and all will repeat:

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 */
  }
}

And if you want a litte skewing:

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 */
  }
}

And with CSS variables to easily control:

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 */
  }
}

You can consider two layers with a different pattern for another kind of animation (more random)

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 */
  }
}

回答2:

I think you were missing some margin-left

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;
  margin-left:400px;
}

#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>

来源：https://stackoverflow.com/questions/59922092/how-to-make-it-rain-everywhere

标签

css

css-animations