Amazing Snow Fall Effect Using Pure CSS3

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:demo.techumber.com</title>  
<style>  
</style>  
</head>  
<body> 

</body>  
</html> 

CSS

body{  
background: #212121;  
font-family: Androgyne;  
background-image: url('img/s1.png'), url('img/s2.png'), 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 0px, 0px 0px, 0px 0px;}  
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}  
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}  
} 

Cross browser support

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

Complete Code

<html lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>demo.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'), url('img/s2.png'), 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 0px, 0px 0px, 0px 0px;}  
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}  
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}  
} 
@-moz-keyframes snow { 
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}  
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}  
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}  
} 
@-webkit-keyframes snow { 
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}  
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}  
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}  
} 
@-ms-keyframes snow { 
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}  
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}  
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}  
} 
</style>  
</head>  
<body>  
<div class="container">  
<header>  
<h1 class="logo">  
<a href="http://techumber.com">  
Techumber.com  
</a>  
</h1>  
</header> 

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

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.