Skip to content

Instantly share code, notes, and snippets.

@brandonbarringer
Created October 31, 2016 21:42
Show Gist options
  • Save brandonbarringer/10bb9cc74a49018ab00c9661d7108e25 to your computer and use it in GitHub Desktop.
Save brandonbarringer/10bb9cc74a49018ab00c9661d7108e25 to your computer and use it in GitHub Desktop.
Sass Function and Styles to make awesome animated snow
@function makeSnow($n)
$value: '#{random(2000)}px #{random(2000)}px rgba(255, 255, 255, .9)'
@for $i from 2 through $n
$value: '#{$value} , #{random(2000)}px #{random(2000)}px rgba(255, 255, 255, .9)'
@return unquote($value)
$snow-small: makeSnow(700)
$snow-medium: makeSnow(500)
$snow-large: makeSnow(300)
.snow
position: absolute
top: 0
left: 0
border-radius: 50%
&--small
width: 1px
height: 1px
background: transparent
box-shadow: $snow-small
animation: animSnow 50s linear infinite
&:after
content: " "
position: absolute
top: 150vh
width: 1px
height: 1px
background: transparent
box-shadow: $snow-small
&--medium
width: 2px
height: 2px
background: transparent
box-shadow: $snow-medium
animation: animSnow 75s linear infinite
&:after
content: " "
position: absolute
top: 150vh
width: 1px
height: 1px
background: transparent
box-shadow: $snow-medium
&--large
width: 3px
height: 3px
background: transparent
box-shadow: $snow-large
animation: animSnow 100s linear infinite
&:after
content: " "
position: absolute
top: 150vh
width: 1px
height: 1px
background: transparent
box-shadow: $snow-large
@keyframes animSnow
from
transform: translateY(-50vh)
to
transform: translateY(100vh)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment