Chociaż umieść animowany śnieg na stronie, czy to od nas, czy od klienta, brzmi to jak praktyka projektowa starsza niż cokolwiek innego, prawda jest taka, że animación które z tej okazji prezentujemy to morze elegancji. Nie potrzebujesz też JavaScript, to proste CSS3.
Pierwszą rzeczą jest przyjrzenie się animacja.
Wygląda całkiem nieźle, prawda? Aby to wcielić w życie, wystarczy stworzyć trzy obrazy z białymi kropkami i animować je za pomocą właściwości @klatki kluczowe CSS3 w następujący sposób:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Dodanie innego przedrostki dla różnych przeglądarek, a następnie ustalając dla naszego ciała:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Dodanie również niezbędnych przedrostków. Pełną procedurę ze szczegółowymi wyjaśnieniami, dzięki uprzejmości Joshuy Johnsona, można znaleźć na jego blogu.
Więcej informacji - Generator gradientów CSS3, generator gradientów CSS3
Źródło - Zaprojektuj Shack