<div id="ground"></div>
/*----------------------------------*/

  * {
    margin:0;
    padding:0;
  }

/*----------------------------------*/

  body {
    background-color: #233;
    overflow:hidden;
  }

/*----------------------------------*/

  #ground {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); 
    width:100%;
    position: absolute;
    top:65%;
    left:0;
    height:35%;
  }

/*----------------------------------*/

  .droplet {
    position: absolute;
  }

/*----------------------------------*/

  .flying {
    position:absolute;
    background-color: #FFF;
    height: 20px;
    width: 2px;
    transform:rotate(20deg);
    animation: 1.5s flying infinite linear;
    opacity:0;
  }

/*----------------------------------*/
  
@keyframes flying {
  0% {
    transform: translate(12000%, -4000%) rotate(20deg);
    opacity:1
  }
  100% {
    transform: translate(0,0) rotate(20deg);
    opacity:1
  }
}

/*----------------------------------*/

  .splashing {
    position:absolute;
    background-color: #FFF;
    height: 20px;
    width: 80px;
    margin-left:-40px;
    margin-top:20px;
    border-radius: 100%;
    animation: 1.5s splashing infinite linear;
    animation-delay: 1.5s;
    opacity:0; 
  }

/*----------------------------------*/

  @keyframes splashing {
    from {
      opacity:1;
      transform: scale(0);
    }
  }

/*----------------------------------*/
	
	var App = {
    numberOfDroplets: 40
  }

//-------------------------------------

  App.spawnDroplet = function(input) {

    	$('body').append('<div class="droplet"><div class="flying"></div><div class="splashing"></div></div>')
			
      var $droplet = $('body .droplet').last()
      var $flying = $droplet.find('.flying')
      var $splashing = $droplet.find('.splashing')
      
      $droplet.css({
          left: input.left + '%',
        	top: input.top + '%',
        	transform: 'scale(' + input.scale + ')',
        	opacity: input.opacity
      })
      $flying.css({
        	animation: input.duration + 's flying infinite linear',
        	'animation-delay': input.delay + 's',
      })
      $splashing.css({
        	animation: input.duration + 's splashing infinite linear',
	        'animation-delay': (input.duration+input.delay) + 's',
      })

  }
  
//-------------------------------------
  var i = 0
  while( i < App.numberOfDroplets ) {
    
    var opacity = Math.random().toFixed(1)
    var scale = opacity * 3
    var y = 65 + ( opacity * 35 )
    var duration = 1 + parseFloat(Math.random().toFixed(2))
    
    App.spawnDroplet({
      left: parseInt( Math.random() * 100 ),
      top: y,
      opacity: opacity,
      scale: scale,
      duration: duration,
      delay: duration
    })
    
    i++
  }
  
//-------------------------------------  
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js