Author: | Golt1on |
---|---|
Views Total: | 4,527 views |
Official Page: | Go to website |
Last Update: | November 9, 2022 |
License: | MIT |
Preview:

Description:
Yet another snow falling animation written entirely in CSS/CSS3. No image, canvas, and 3rd-party libraries required.
How to use it:
1. Add as many snowflakes to the webpage.
<div class="snow"></div> <div class="snow"></div> <div class="snow"></div> ...
2. Style the snowflakes.
.snow { position: absolute; width: 10px; height: 10px; background: white; border-radius: 50%; }
3. Apply falling animations to the snowflakes.
.snow:nth-child(1) { opacity: 0.6064; transform: translate(56.5936vw, -10px) scale(0.1606); animation: fall-1 22s -16s linear infinite; } @keyframes fall-1 { 34.585% { transform: translate(57.9903vw, 34.585vh) scale(0.1606); } to { transform: translate(57.29195vw, 100vh) scale(0.1606); } } .snow:nth-child(2) { opacity: 0.0623; transform: translate(38.6106vw, -10px) scale(0.3982); animation: fall-2 17s -21s linear infinite; } @keyframes fall-2 { 70.443% { transform: translate(37.0175vw, 70.443vh) scale(0.3982); } to { transform: translate(37.81405vw, 100vh) scale(0.3982); } } .snow:nth-child(3) { opacity: 0.7242; transform: translate(18.1453vw, -10px) scale(0.9984); animation: fall-3 10s -24s linear infinite; } @keyframes fall-3 { 71.78% { transform: translate(22.1161vw, 71.78vh) scale(0.9984); } to { transform: translate(20.1307vw, 100vh) scale(0.9984); } } ...