Com funciona
CSS pur
Aquesta és una animació CSS d'un arbre de Pitàgores amb una mica de neu. A diferència de la majoria de les animacions CSS, aquesta no utilitza elements HTML.
Arbre de Pitàgores
L'arbre es basa en el codi d'exemple d'arbre de Pitàgores de Rosetta Code. No he trobat cap altre exemple d'implementació d'un arbre de Pitàgores en CSS com el meu, així que aquí és com funciona.
Vaig posar un fons marró al pseudoelement body::after.
Utilitzo clip-path per ocultar les parts fora de l'arbre.
Per simular l'efecte del vent sobre les branques, genero dos arbres lleugerament diferents.
Utilitzo una animació @keyframe per rebotar entre tots dos.
Neu
La neu utilitza la mateixa combinació de background-color i clip-path que l'arbre, excepte amb cercles en lloc de polígons.
La neu es mou a l'esquerra durant la seva caiguda en el temps amb el balanceig de l'arbre, que simula el vent.
Compensacions de rendiment
Aquest té un rendiment lleugerament millor que l'animació de foc que vaig fer fa un parell de mesos, però encara no és realment una tècnica que m'agradaria en un lloc web real. Però és divertit fer aquestes coses i això és el que importa.
Una cosa que m'agrada molt d'això és que aprofita un dels punts forts únics de CSS. Els arbres de Pitàgores sempre s'implementen com a imatges estàtiques. CSS va facilitar l'animació d'aquest.