Padający śnieg – zimowa animacja z CSS
Dziś pokaże wam jak zrobić prostą świąteczną animacje – padający śnieg w 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. W przeciwnym razie rysunki przedstawiające gwiazdki były by nie widoczne na białym tle.
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(https://www.aurainweb.pl/wp-content/uploads/2017/08/snieg-1-e1512733256249.png), url(https://www.aurainweb.pl/wp-content/uploads/2017/08/snieg-2-e1512733339864.png), url(https://www.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.