Falling leaves CSS3 Animation
by muthu[ Edit ] 2013-12-18 16:26:39
Falling leaves CSS3 Animation
------------------------------------------ DEMO ------------------------------------------
------------------------------------------ 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:#ff6c00; } .bg { background:url(tree.jpg) no-repeat; }
#wrap { background-image:url('3.png'), url('2.png'), url('1.png'); -webkit-animation:snow 20s linear infinite;
-moz-animation:snow 20s linear infinite; -ms-animation:snow 20s linear infinite; animation:snow 20s linear infinite; width:700px; height:450px; }
#container { width:700px; 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 leaves CSS3 by Muthujoo</h3>
<p>Falling leaves CSS3 by Muthujoo</p>
</div>
</div>
</div>
------------------------------------------ IMAGES ------------------------------------------
