Estoy tratando de aleatorizar la posición de las líneas diagonales que caen usando el relleno. Cada vez que trato de usar el siguiente código, las líneas no cambian. Sin embargo, si agrego style:padding-left:300px al estilo de la lluvia y elimino mi JavaScript, puedo mover el elemento a la derecha 300px. En teoría, puedo hacer esto y mapear cada línea; sin embargo, me gustaría saber cómo aleatorizar el relleno, preferiblemente de forma dinámica y no solo en onpageload de la página.
<script> function randomnumber(min, max) { var rn = Math.random() * (max - min) + min; document.querySelector('#rain .line').style.padding = rn+'px'; } </script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ background:#000000; margin: 100px; } .line { height: 1px; width: 40px; background: white; transform: rotate(45deg); } .rainsize{ height:100%; width:100%; opacity:0%; z-index:1000; position:fixed; width:100%; top:0px; left:0px; } .move{ position:relative; animation-name: moverain; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes moverain { 0%{top:0px;left:0px;} 100%{top:1000px;left:1000px;} } </style> <div onpageload="randomnumber('10','1000')"class="rainsize"></div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div> <div id=rain class="move"> <div class="line""></div> </div>Podrías hacer algo como:
function randomnumber(min, max) { return Math.round(Math.random() * (max - min) + min); } document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.line').forEach(value => value.style.padding = randomnumber(1, 10) + 'px'); }, false);