Neve animata con CSS

Neve animata con CSS3

Sebbene mettere la neve animata su una paginasia da noi che da un cliente, suona come uno studio di design più antico di ogni altra cosa, la verità è che il animazione quello che vi presentiamo in questa occasione è il mare dell'elegante. Inoltre non hai bisogno di JavaScript, è semplice CSS3.

La prima cosa è dare un'occhiata l'animazione.

Sembra piuttosto buono, vero? Per metterlo in pratica dobbiamo solo creare tre immagini con punti bianchi e animarle utilizzando la proprietà @fotogrammi chiave di CSS3 come segue:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Aggiungendo il diverso prefissi per diversi browser, quindi stabilendo per il nostro corpo:

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

Aggiungendo anche i prefissi necessari. La procedura completa con spiegazioni dettagliate, per gentile concessione di Joshua Johnson, può essere trovata sul suo blog.

Maggiori informazioni - CSS3 Gradient Generator, CSS3 Gradient Generator
Fonte - Design Shack


Il contenuto dell'articolo aderisce ai nostri principi di etica editoriale. Per segnalare un errore fare clic su qui.

Puoi essere il primo a lasciare un commento

Lascia un tuo commento

L'indirizzo email non verrà pubblicato.

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.