Осенний дождь на сайт
HTML-низ
Код:
<!-- Дождь -->
<script>
function random(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}
for (var i=0; i<200; i++) {
document.getElementsByTagName('body')[0].innerHTML += '<i class="rain" style="left: '+random(-2000, 2000)+'px;transform: translate3d(0, 0, 0);animation-delay: '+(0.01 * i)+'s"></i>';
}
</script>
<!-- конец: Дождь -->Затем во второе окно стилей вниз прописать это:
Код:
/** © 2017 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/krossbrauzernyy-effekt-dozhdya-na-javascriptcss **/
.rain {
position: fixed;
width: 1px; /* Ширина капли */
height: 9px; /* Высота капли */
top: -3px;
background-color: #fff; /* Цвет капли */
animation: rain 1.2s linear infinite;
z-index: 99;
border-radius: 1px;
}
@keyframes rain {
to {
transform: translate3d(200px, 1000px, 0); /* Первое значение (200px) это направление дождя, где: 0 - вниз, положительное число - вправо, отрицательное - влево */
}
}Источник - здесь.