【CSS3】CSSだけで背景に雪を降らせてうっとりする

CSS3のanimationを使って背景に雪を降らせます。

CSS

@keyframes drop {
	0%   { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 500px 1000px, -400px 800px, 0 600px; }
}

@-moz-keyframes drop {
	0%   { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 500px 1000px, -400px 800px, 0 600px; }
}

@-webkit-keyframes drop {
	0%   { background-position: 0 0, 0 0, 0 0; }
	100% { background-position: 500px 1000px, -400px 800px, 0 600px; }
}

body {
	background-color: #000; 
	background-image: url('drop.png'), url('drop2.png'), url('drop3.png');
	-webkit-animation: drop 10s linear infinite;
	-moz-animation: drop 10s linear infinite;
	animation: drop 10s linear infinite;
}

DEMO

デモページ

webkit系のブラウザ、もしくはFirefoxの最新版でご覧下さい。