<div></div>
$snowFlakes: 50
$background_list: null
$animation_list: null
@for $i from 1 through $snowFlakes
$size: random(10)/8
$background_string: radial-gradient(circle farthest-side, white 99.9%, transparent 0) var(--snowX#{$i}) var(--snowY#{$i}) / #{$size}vw #{$size}vw
$background_list: append($background_list, $background_string, comma)
$animation_string: snowFall#{$i} #{random(8)+5}s -#{random(10)}s
$animation_list: append($animation_list, $animation_string, comma)
@property --snowX#{$i}
syntax: '<length>'
inherits: false
initial-value: 0vmin
@property --snowY#{$i}
syntax: '<length>'
inherits: false
initial-value: 0vmin
@keyframes snowFall#{$i}
$x: random(100)
0%
--snowX#{$i}: #{$x}vw
--snowY#{$i}: -5vh
100%
--snowX#{$i}: #{$x + random(20) - 10}vw
--snowY#{$i}: calc(100vh - #{$size/2}vw)
body
background: #369
overflow: hidden
div, div::before
@for $i from 1 through $snowFlakes
--snowX#{$i}: #{random(100)}vw
--snowY#{$i}: #{random(100)}vh
content: ""
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 100vw
height: 100vh
background: $background_list
background-repeat: no-repeat
animation: $animation_list
animation-iteration-count: infinite
animation-timing-function: linear
div::before
animation-iteration-count: 1
animation-fill-mode: forwards
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.