Skip to content

Instantly share code, notes, and snippets.

@dkdndes

dkdndes/Falling-snowflakes-CSS-only.markdown

Last active January 2, 2016 20:49
Show Gist options
  • Save dkdndes/8359463 to your computer and use it in GitHub Desktop.
Save dkdndes/8359463 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Jesse Taylor - saved as gist
Raw
Falling-snowflakes-CSS-only.markdown

Falling snowflakes CSS only

CSS animation of falling snowflakes using SASS

A Pen

License.

Raw
index.html
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
Raw
style.scss
@import "compass";
$snowflakes: 240;
@font-face {
font-family: snowflakes;
src: url(http://ff.static.1001fonts.net/k/r/kr-kinda-flakey.regular.ttf);
}
html {
background: #111;
height:2000px;
overflow:hidden;
}
span {
font-family: snowflakes;
color:gray;
float:left;
display:block;
@for $i from 1 through $snowflakes{
&:nth-child(#{$i}) {
animation: rotate random(100)+ 50 + s linear infinite, slide random(100) + s linear infinite;
font-size:random(100) + 50 + px;
position:absolute;
top:random(100) - 300 + px;
left: random(100) *1%;
}
}
}
@keyframes rotate {
from {transform: rotate(0deg)};
to {transform: rotate(360deg)};
}
@keyframes slide {
from {top:-300px};
to {top:600px};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment