Skip to content

Instantly share code, notes, and snippets.

@xiankai
Created April 6, 2014 02:25
Show Gist options
  • Save xiankai/10000750 to your computer and use it in GitHub Desktop.
Save xiankai/10000750 to your computer and use it in GitHub Desktop.
An adaptation of snowfall CSS3 from http://www.techumber.com/2012/12/amazing-snow-fall-effect-using-pure-css3.html, for /r/Frozen.
@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;}
}
.self.thing .entry {
background-color: #96C8FD;
background-image: url('http://demo.techumber.com/snowfallcss3/img/s1.png'), url('http://demo.techumber.com/snowfallcss3/img/s2.png'), url('http://demo.techumber.com/snowfallcss3/img/s3.png');
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment