Padający śnieg – zimowa animacja z CSS

Dziś pokaże wam jak zrobić prostą świąteczną animacje – padający śnieg z pomocą grafiki, HTML i CSS.

Prosta animacja z obrazków

Na początek przygotowałam 3 podobne obrazki z płatkami śniegu w formacie PNG (bez tła). W moim przypadku będą to:

Dodałam pod spód szare tło by lepiej było widać obrazki, nie mają one bowiem tła jedynie gwiazdeczki symbolizujące płatki śniegu, które zlały by się z tłem mojej witryny. Tło w tym miejscu ma więc zastosowanie czysto praktyczne.

Budujemy animację z pomocą CSS

Na sam początek musimy mieć stworzyć prosty kontener z pomocą HTML. To w tym kontenerze będzie wyświetlała się nasza animacja.

<div class="movtlo"></div>

Jak widać kontener ten jest całkowicie pusty. I taki ma być przynajmniej na razie. Bo już w następnym kroku dodamy do niego właściwości i efekty w CSS.

@keyframes ruch
{
  0% { background-position:0 0, 0 0, 0 0; }
  50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
  100% { background-position: 500px 1000px, 200px 400px, -100px 300px; }
}
 @-webkit-keyframes ruch
      {
        0% { background-position:0 0, 0 0, 0 0; }
       50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
      100% { background-position: 500px 1000px, 200px 400px, -100px 300px; }
      }

 
 .movtlo {
background-color:#e3e3e3;
    height: 200px;
    background-image: url(http://aurainweb.pl/wp-content/uploads/2017/08/snieg-1-e1512733256249.png), 
url(http://aurainweb.pl/wp-content/uploads/2017/08/snieg-2-e1512733339864.png), 
url(http://aurainweb.pl/wp-content/uploads/2017/08/snieg-3-e1512733296108.png);
    animation: ruch 10s linear infinite;}

.tlo{
background-color:#e3e3e3;
}

Animacje CSS, które dziś zaprezentowałam omówiłam nieco szerzej we wpisie na temat animacji. Dlatego jeśli chcecie dowiedzieć się jak to działa odsyłam was do tamtego wpisu.

Polecam również przeczytać wpis o wstawianiu obrazkowego tła.

Efekt końcowy:

See the Pen Snow in CSS by Aura (@Julka85) on CodePen.