- var n = 0;
while ++n < 40
span ❄️
View Compiled
body {
background: linear-gradient(hsl(220 80% 10%), hsl(220 80% 25%));
overflow: hidden;
}
span {
display: inline-block;
margin: 0 .5em 40vh;
font-size: calc(200% * var(--fs, 1));
transform: translateY(-100vh);
animation: snowfall calc(6s / var(--fs, 1)) infinite linear both;
text-shadow: .1em .1em .4em rgba(0 0 0 / .4);
}
@keyframes snowfall {
30% {
translate: var(--offset-1, 1ch);
}
60% {
translate: var(--offset-2, -1ch);
}
to {
transform: translateY(100vh);
}
}
span:nth-child(3n) { --fs: 1.3; }
span:nth-child(3n + 2) { --fs: .8; }
span:nth-child(5n ) { --offset-1: 4ch; }
span:nth-child(5n + 1) { --offset-1: -1ch; }
span:nth-child(5n + 2) { --offset-1: 3ch; }
span:nth-child(5n + 3) { --offset-1: -5ch; }
span:nth-child(5n + 4) { --offset-1: -2ch; }
span:nth-child(7n ) { --offset-2: 5ch; }
span:nth-child(7n + 1) { --offset-2: 3ch; }
span:nth-child(7n + 2) { --offset-2: -2ch; }
span:nth-child(7n + 3) { --offset-2: 2ch; }
span:nth-child(7n + 4) { --offset-2: -4ch; }
span:nth-child(7n + 5) { --offset-2: 1ch; }
span:nth-child(7n + 6) { --offset-2: -1ch; }
span:nth-child(11n + 1) { animation-delay: .5s; }
span:nth-child(11n + 2) { animation-delay: 1s; }
span:nth-child(11n + 3) { animation-delay: 1.5s; }
span:nth-child(11n + 5) { animation-delay: 2s; }
span:nth-child(11n + 6) { animation-delay: 2.5s; }
span:nth-child(11n + 7) { animation-delay: 3s; }
span:nth-child(11n + 9) { animation-delay: 3.5s; }
span:nth-child(11n + 10) { animation-delay: 4s; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.