snow

HTML

<div class="container"></div>

CSS

body{
  background-color: #000;
}

.snowflake{
  -webkit-box-shadow: 1px 1px 10px #fff;
  -moz-box-shadow: 1px 1px 10px #fff;
  box-shadow: 1px 1px 5px #fff;
  width: 3px;
  height: 3px;
  background-color: #fc0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: snow 15s ease;
  -o-animation: snow 15s ease;
  animation: snow 15s ease;
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}

.container, body{
  overflow-x: hidden;
}



@keyframes snow {
  0%   {
    
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0.2;
  }
}

JavaScript

$(function(){

var i;

setInterval(function(){
createSnow();
}, 1000);


function createSnow(){
for(i = 0; i< 20; i++){
var topRand = Math.floor(Math.random() * 20 + 1);
var leftRand = Math.floor(Math.random() * 100 + 1);
	var snowflakeCreate = document.createElement('div');
  $('.container').prepend($(snowflakeCreate));
  $(snowflakeCreate).addClass('snowflake');
  $(snowflakeCreate).css({
  'top' : topRand+'px',
  'left': leftRand+'%'
  });
}
setInterval(function(){
$('.snowflake').each(function(){
    if($(this).offset().top - $(window).scrollTop() >= 300){
      $(this).remove();
    }
  });
}, 1000);
}





});