Techumber

Amazing Snow Fall Effect Using Pure CSS3

Github avatar
Dimpu
December 20, 2012. 3 min read

In our last post we learned how to create snowfall effect using JavaScript plugin Make ShowStrome.js. To-day I will explain how to create similer kind of effect using CSS3. You can find lots of javascript(Jquery) to CSS3 conversions in CSS3-Widgets section. I think this is also another JavaScript to jquery conversion. Have a look at the demo below. Amazing Snow Fall Effect Using Pure CSS3

Demo

Download

index.html

<html>
<head>
<title>Amazing Snow Fall Effect Using Pure CSS3:demos.techumber.com</title>
<style>
</style>
</head>
<body>

</body>
</html>

CSS

body{
background: #212121;
font-family: Androgyne;
background-image: url('img/s1.png')undefined url('img/s2.png')undefined url('img/s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}

Creating key-frames

@keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;}
}

Cross browser support

@-moz-keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 400px 1000pxundefined 200px 400pxundefined 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;}
}

Complete Code

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demos.techumber.com</title>
<style type="text/css">
@font-face {
font-family: Androgyne;
src: url('Androgyne_TB.otf');
}
.container{
width: 700px;
margin: 0 auto;
}
.logo{
text-align: center;
}
.logo a{
color:#fff;
}
body{
background: #212121;
font-family: Androgyne;
background-image: url('img/s1.png')undefined url('img/s2.png')undefined url('img/s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 400px 1000pxundefined 200px 400pxundefined 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;}
50% {background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;}
100% {background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1 class="logo">
<a href="//techumber.com">
Techumber.com
</a>
</h1>
</header>

</div>
</body>
</html>

...