Как заставить дождь лить везде?

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

Это хорошая работа для некоторого случайного радиального градиента, который должен повторяться.
Необходимо использовать не linear-gradient, а radial-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; /* размер капли воды*/
  --c:#ccc;    /* цвет капель воды*/
  --a:-7deg;   /* контролировать наклон струй*/
  --w:53px;    /* ширина pattern*/
  --h:55px;    /* высота 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 */
  }
}

Answer 2

Когда в коде разбирался создал такую погоду что страшно даже в окно смотреть :((

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);
  background:
     radial-gradient(2px 8px,#cccccc 100%,transparent 100%),
     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 2s linear infinite;
}

@keyframes rain{
  0% {
    transform: skew(0deg) translateY(0px); 
  }
 50%{
   transform: skew(2deg) translateY(55px); 
 }
 
 100%{
  transform: skew(0deg) translateY(110px); 
 }
}

<div id="background" class="rain night">
  <div class="cloud" ></div>
  <div class="cloud" ></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
  <div class="cloud"></div>
</div>

Answer 3

Только ради наглядности, снабдил слайдерами переменные:

html {
  height: 100%;
  background: linear-gradient(#0F2129, #47334A);
  overflow: hidden;
  --s: 1px 8px; /* размер капли воды*/
  --c: #ccc;    /* цвет капель воды*/
  --a: -7deg;   /* контролировать наклон струй*/
  --w: 53px;    /* ширина pattern*/
  --h: 55px;    /* высота pattern*/
  --rad: radial-gradient(var(--s), var(--c) 100%, transparent 100%);
  --spd: 0.2s;
}

html:before,
html:after {
  content: "";
  position: absolute;
  z-index: -1;
  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 var(--spd) 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 */
  }
}
/* "--w:68px; --a:-7deg; --s:1px 1px; --h:55px;" */
span {
  text-shadow: 0 1px 4px #020202;
    vertical-align: top;
    font: bold 19px Arial;
    color: rgba(47, 79, 79, 0.58);
    -webkit-text-stroke: 0.8px rgba(241, 247, 247, 0.4);
}
input { opacity: .4; }

<input type="range" min="1" max="10" oninput="document.querySelector('html').style.setProperty('--s', '1px ' + this.value + 'px');" value="8"><span>Размер капли</span><br>
<input type="range" min="-10" max="10" oninput="document.querySelector('html').style.setProperty('--a', this.value + 'deg');" value="7"><span>Наклон струй</span><br>
<input type="range" min="1" max="100" oninput="document.querySelector('html').style.setProperty('--w', this.value + 'px');" value="53"><span>Ширина pattern</span><br>
<input type="range" min="1" max="100" oninput="document.querySelector('html').style.setProperty('--h', this.value + 'px');" value="55"><span>Высота pattern</span><br>
<input type="range" min="0.05" max="1.0" step="0.01" oninput="document.querySelector('html').style.setProperty('--spd', this.value + 's');" value="0.2"><span>Скорость капель</span>

БЛОГ НА HUSL

Как заставить дождь лить везде?

Ответы (3 шт):