Christmas is coming up, so wanted to try out making some snow with a CSS3 animation
A Pen by Nicky Christensen on CodePen.
Created
November 25, 2016 04:22
-
-
Save CodeMyUI/b286f2051d03ee31832a9f57040537ce to your computer and use it in GitHub Desktop.
CSS3 Snow Animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="snow"> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { background-color:#333; } | |
| #snow{ | |
| background: none; | |
| font-family: Androgyne; | |
| background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png'); | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| z-index:1; | |
| -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;} | |
| } |
I confirm that the links are broken.
Here, just created a project with the lost images included:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Not working for now
http://www.wearewebstars.dk/codepen/img/s1.png - this links are broken