Astronautenanimation mit CSS3-Spezialeffekten

Dies ist eine reine CSS3-Implementierung des Astronauten-Fallanimationseffekts im Weltraum

<Stil>
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Hintergrundfarbe: #102037;
Überlauf: versteckt;
}
@-webkit-keyframes Schnee {
0% { opacity: 0; -webkit-transform: translatorY(0px); 20 %{ Deckkraft: 1;}
100 % { opacity: 1; -webkit-transform: TranslateY(650px); transform: TranslateY(650px); }
@keyframes Schnee {
0% { opacity: 0; -webkit-transform: translatorY(0px); 20 %{ Deckkraft: 1;}
100 % { opacity: 1; -webkit-transform: TranslateY(650px); transform: TranslateY(650px); }
@-webkit-keyframes Astronaut{
0 %{
-webkit-transform: rotieren(0deg);
​ ​ ​ ​ transformieren: rotieren(0deg);
}
100 %{
-webkit-transform: rotieren (360 Grad);
​ ​ ​ ​ transformieren: drehen (360 Grad);
}
}
.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4{
Breite: 100 %;
Position: absolut;
Z-Index: 10;
links: 0;
-webkit-transform: TranslateY(650px);
​ ​ ​ transform: TranslateY(650px);
}
.box-of-star1{
-webkit-animation: Schnee 5s linear unendlich;
}
.box-of-star2{
-webkit-animation: Schnee 5s -1,64s linear unendlich;
}
.box-of-star3{
-webkit-animation: Schnee 5s -2,30s linear unendlich;
}
.box-of-star4{
-webkit-animation: Schnee 5s -3,30s linear unendlich;
}
.star{
Breite: 3px;
Höhe: 3px;
Randradius: 50 %;
Hintergrundfarbe: #FFF;
Position: absolut;
Z-Index: 10;
Deckkraft: .7;
}
.star:before{
Inhalt: "";
Breite: 6px;
Höhe: 6px;
Randradius: 50 %;
Hintergrundfarbe: #FFF;
Position: absolut;
Z-Index: 10;
oben: 40px;
links: 70px;
Deckkraft: .7;
}