Efeito de neve apenas com CSS

16h atrás

Para fazer um efeito de neve caindo, apenas com #CSS, vamos iniciar criando o estilo pra cada floco de neve:

.snow {
	animation: snow var(--time) ease-in infinite;
	background-color: #FFFFFF;
	border-radius: 50%;
	height: var(--size);
	position: absolute;
	top: calc(var(--size) * -2);
	width: var(--size);
}

Agora, vamos adicionar a animação de neve caindo, usando keyframes:

@keyframes snow {
	20% {
		transform: translateX(100%);
	}

	40% {
		transform: translateX(-100%);
	}

	60% {
		transform: translateX(100%);
	}

	80% {
		transform: translateX(-100%);
	}

	100% {
		top: 125%;
	}
}

Por fim, podemos adicionar quantos flocos de neve que quisermos:

<div class="snow" style="--size: 16px; --time: 5s; left: 0;"></div>
<div class="snow" style="--size: 8px; --time: 4s; left: 10%;"></div>
<div class="snow" style="--size: 20px; --time: 6s; left: 20%;"></div>
<div class="snow" style="--size: 12px; --time: 4.5s; left: 30%;"></div>
<div class="snow" style="--size: 14px; --time: 4.75s; left: 40%;"></div>

Exemplo

Veja o código completo e exemplo abaixo:

Exemplo

Comentários (0)