Falling Rain Animation CSS3

by muthu 2013-12-23 17:57:52

Falling Rain Animation CSS3
--------------------------------------------- DEMO ---------------------------------------------
demo.png
--------------------------------------------- CSS3 ---------------------------------------------

* { margin:0; padding:0; } a { color:white; font-style:italic; } /*Keyframes*/
@keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-moz-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-webkit-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
50% { background-color:#b4cfe0 } 100% { background-position:500px 1000px, 400px 400px, 300px 300px; background-color:#ff6c00; } }
@-ms-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
body { background:#000; } .bg { background:url(rain_bg1.jpg) no-repeat; }
#wrap { background-image:url('rain.png'), url('rain1.png');
-moz-animation:snow 10s linear infinite; -ms-animation:snow 10s linear infinite; animation:snow 10s linear infinite; width:800px; height:541px; }
#container { width:800px; margin:0px auto; text-align:center; color:white; font:50px "League Gothic", "Arial Narrow", "Bebas Neue", Arial;
text-shadow:0px 0px 4px rgba(0,0,0, 0.5); }
#container p { font:22px Arial, Helvetica, sans-serif;}

--------------------------------------------- HTML5 ---------------------------------------------

<div class="bg"><div id="wrap"><div id="container"><h3>Falling Rain CSS3 by Muthujoo</h3></div></div></div>

--------------------------------------------- IMAGES ---------------------------------------------
rain_bg1.jpgrain1.pngrain.png
1054
like
0
dislike
0
mail
flag

You must LOGIN to add comments