Animierter Schnee mit CSS

Animierter Schnee mit CSS3

Obwohl Lege animierten Schnee auf eine Seite, sei es von uns oder von einem Kunden, es klingt wie eine Designpraxis, die älter ist als alles andere, die Wahrheit ist, dass die Animation Das, was wir bei dieser Gelegenheit präsentieren, ist das Meer der Eleganz. Außerdem benötigen Sie kein JavaScript, es ist einfach CSS3.

Das erste ist einen Blick darauf zu werfen die Animation.

Sieht ziemlich gut aus, oder? Um es in die Praxis umzusetzen, müssen wir nur drei Bilder mit weißen Punkten erstellen und sie mithilfe der Eigenschaft animieren @Keyframes von CSS3 wie folgt:

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

Hinzufügen der verschiedenen Präfixe für verschiedene Browser, dann für unseren Körper etablieren:

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

Fügen Sie auch die erforderlichen Präfixe hinzu. Das vollständige Verfahren mit detaillierten Erklärungen, mit freundlicher Genehmigung von Joshua Johnson, finden Sie in seinem Blog.

Mehr Informationen - CSS3-Verlaufsgenerator, CSS3-Verlaufsgenerator
Quelle - Design-Hütte


Schreiben Sie den ersten Kommentar

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit *

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.