CSS snow

by Entoarox

HTML

<header><img style="cursor:pointer" src="http://host.kvdk.net/x8v2/images/logo.png" /></header>

CSS

@-webkit-keyframes snow {0%{background-position:0px 0px,300px 0px,600px 0px;}100%{background-position:900px 1800px,1200px 2700px,1500px 3600px;}}
@-moz-keyframes snow {0%{background-position:0px 0px,300px 0px,600px 0px;}100%{background-position:900px 1800px,1200px 2700px,1500px 3600px;}}
@-ms-keyframes snow {0%{background-position:0px 0px,300px 0px,600px 0px;}100%{background-position:900px 1800px,1200px 2700px,1500px 3600px;}}
@-o-keyframes snow {0%{background-position:0px 0px,300px 0px,600px 0px;}100%{background-position:900px 1800px,1200px 2700px,1500px 3600px;}}
@keyframes snow {0%{background-position:0px 0px,300px 0px,600px 0px;}100%{background-position:900px 1800px,1200px 2700px,1500px 3600px;}}
header
{
    background-color:#800;
    background-image:url('http://www.hdbackgroundpoint.com/wp-content/uploads/2013/12/31/Winter-Snow-Wallpaper-44.jpg');
    width:970px;
    height:70px;
    position:relative;
}
header *
{
    position:relative;
    z-index:2;
}
header:after
{
    content:'';
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:70px;
    z-index:1;
    background-image:url(https://dl.dropboxusercontent.com/u/14002006/snow/5.png),
        url(https://dl.dropboxusercontent.com/u/14002006/snow/5.png),
        url(https://dl.dropboxusercontent.com/u/14002006/snow/5.png)
        ;
    -webkit-animation:snow 30s linear infinite;
    -moz-animation:snow 30s linear infinite;
    -ms-animation:snow 30s linear infinite;
    -o-animation:snow 30s linear infinite;
    animation:snow 30s linear infinite;
}