// number of drops created. var nbDrop = 1000; // function to generate a random number range. function randRange( minNum, maxNum) { return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum); } // function to generate drops function createRain() { for( i=1;i<nbDrop;i++) { var dropLeft = randRange(0,1600); var dropTop = randRange(-1000,1400); $('.rain').append('<div class="drop" id="drop'+i+'"></div>'); $('#drop'+i).css('left',dropLeft); $('#drop'+i).css('top',dropTop); } } // Make it rain createRain();
<section class="rain"></section> <div id="clouds"> <div class="cloud x1"></div> <div class="cloud x2"></div> <div class="cloud x3"></div> <div class="cloud x4"><div> <div class="cloud x5"></div> </div>
*{ margin: 0, padding: 0;} body { overflow: hidden; background: #c9dbe9; background: -linear-gradient(top,#c9dbe9 0%, #fff 100%); background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%); background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%); } .drop { background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1) ), to(rgba(255,255,255,0.6)) ); background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%); width:1px; height:89px; position: absolute; bottom:200px; -webkit-animation: fall 1s linear infinite; -moz-animation: fall 1s linear infinite; } #clouds { padding: 100px 0; } .cloud { width: 200px; height: 60px; background: #fff; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: relative; } .cloud:before, .cloud:after { content: ''; position: absolute; top: -15px; left: 10px; background: #fff; width: 100px; height: 80px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); } .cloud:after { width: 120px; height: 120px; top: -55px; left: auto; right: 15px; } .x1 { -webkit-animation: moveclouds 15s linear infinite; -moz-animation: moveclouds 15s linear infinite; } .x2 { left: 200px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); opacity: 0.6; -webkit-animation: moveclouds 25s linear infinite; -moz-animation: moveclouds 25s linear infinite; } .x3 { left: -250px; top: -200px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); opacity: 0.8; -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; } .x4 { left: 470px; top: -250px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); opacity: 0.75; -webkit-animation: moveclouds 18s linear infinite; -moz-animation: moveclouds 18s linear infinite; } .x5 { left: -150px; top: -150px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); opacity: 0.8; -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; } @-webkit-keyframes moveclouds { 0% { margin-left: 1000px;} 100% { margin-left: -1000px;} } @-moz-keyframes moveclouds { 0% { margin-left: 1000px;} 100% { margin-left: -1000px;} } @-webkit-keyframes fall { to {margin-top:900px;} } @-moz-keyframes fall { to {margin-top:900px;} }