如何到处都下雨? [英] How to make it rain everywhere?

问题描述

我想为仅使用CSS的我的天气应用创建下雨效果.但是，即使我在外观上取得了令人满意的结果，我似乎也无法使它们连续覆盖整个屏幕，而不仅仅是随机覆盖整个屏幕-我将如何处理?

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>

推荐答案

对于重复的某些随机 radial-gradient ，这是一项很好的工作.不是 linear-gradient (线性渐变)，因为您将很难在重复之间创建空格(可能是不可能的).

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

如果要倾斜一点:

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变量可以轻松控制:

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

这篇关于如何到处都下雨?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！