PURE CSS SNOW FALL EFFECT // SNOW EFFECT USING CSS BY #BKTutorial

 

Source Code:

1) Index.html

<link rel="stylesheet" href="style.css">

<section>

    <div class="snow1"></div>

    <div class="snow2"></div>

    <audio src="music.mp3" controls="controls" autoplay ></audio>

</section>

2)Style.css

@charset "utf-8";

/* CSS Document */

body

{

   margin:0;

   padding:0;

}

section

{

  background:url(gh.jpg);

  background-size:cover;

  width:100%;

  height:650px;

  position:relative;

  overflow:hidden;

}

.snow1

{

  background:url(snow.png);

  background-repeat:repeat;

  width:100%;

  height:650px;

  position:absolute;

  top:0;

  left:0;

  animation:animateOne 30s linear infinite;

  background-size:30px;

}

.snow2

{

  background:url(snow.png);

  background-repeat:repeat;

  width:100%;

  height:650px;

  position:absolute;

  top:0;

  left:0;

  animation:animateTwo 15s infinite linear;

  background-size:50px;

}

@keyframes animateOne{

   0%{background-position:0px 0px;}

   100%{background-position:100px 650px;}

}

@keyframes animateTwo{

   0%{background-position:0px -100px;}

   100%{background-position:0px 650px;}

}

audio

{ display:none;}

Output