X

Snow Effect using HTML5 and CSS3 with example

Here is a nice snow effect which build using the power of HTML5 and CSS3. The main feature is it didn’t use JavaScript. It uses the keyframes feature of CSS3 for animation. You can find the details of codes below and also option for the testing using demo button. Hope it will be a nice post in this Christmas season.

CSS

 
html {
	background : url(images/bg-xmas.jpg) center center no-repeat fixed;
	background-size : cover;
	height : 100%;
	width : 100%;
}
/*Keyframes*/
@keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	}
	 100% {
		background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px;
	}
}
 @-moz-keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	}
	 100% {
		background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px;
	}
}
 @-webkit-keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	}
	 100% {
		background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px;
	}
}
 @-ms-keyframes snow {
	0% {
		background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	}
	 100% {
		background-position : 600px 900px, 300px 300px, 200px 200px, 800px 780px;
	}
}
body.snowfall {
	background-image : url('images/snow.png'), url('images/snow3.png'), url('images/snow2.png'), url('images/snow-4.png');
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
	height: 100%;
	width: 100%;
	float: left;
}
h2{
	font-size:66px;
	color:#fff;
	text-align:center;
}

HTML

 
 
<!DOCTYPE html>
<head>
</head>
 
<body class="snowfall">
 
	<div class="container">
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<h2>Christmas Snowfall </h2>
	</div>	
 
</body>
</html>

Demo