Skip to content

Instantly share code, notes, and snippets.

@masasdani
Created February 18, 2012 07:30
Show Gist options
  • Save masasdani/1858037 to your computer and use it in GitHub Desktop.
Save masasdani/1858037 to your computer and use it in GitHub Desktop.
css snowflake
* {
margin: 0;
padding: 0;
}
a {
color: white;
font-style: italic;
}
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
body {
background-color: #6b92b9;
background-image: url('https://lh3.googleusercontent.com/-zt9UOQSBaIo/Tz9P04-UuqI/AAAAAAAAACg/hTwHLFKo9t8/s400/snow.png'),
url('https://lh4.googleusercontent.com/-0fKGNnbIGPQ/Tz9P0zZ9F2I/AAAAAAAAACk/Slj2F3A_8v8/s800/snow2.png'),
url('https://lh5.googleusercontent.com/-kGPWUnNvnxw/Tz9P090iTfI/AAAAAAAAACo/UhDKoIDu4Ms/s144/snow3.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
#container {
width: 800px;
margin: 200px auto;
text-align: center;
color: white;
font: 100px/1 'Spirax', cursive;
text-shadow: 0px 0px 4px rgba(255,255,255, 0.5);
}
#container p {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment