Astronautenanimation mit CSS3-Spezialeffekten
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;
}
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von gro?en Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrit?t der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Versto? vorliegt, kontaktieren Sie uns bitte, um ihn zu l?schen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
CSGO Special Effects Blockbuster-Filme HD Eingang betrachten, um CSGO mit hochaufl?senden Spezialeffekten Blockbuster-Filme direkt anzusehen
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) ist ein Ego-Shooter, der von Spielern auf der ganzen Welt geliebt wird. Die aufregenden Wettbewerbe und hochwertigen Spezialeffektvideos waren immer Themen, über die Spieler sprechen sollten. Egal, ob es sich um die aufregenden professionellen Ligen oder das freundliche Match zwischen gew?hnlichen Spielern handelt, es kann erstaunliche Spezialeffekte und Strategien im Spiel zeigen. In diesem Artikel werden Sie ausführlich vorgestellt, wie Sie CSGO -Spezialeffekt -Blockbuster im Detail finden und ansehen, um sicherzustellen, dass Sie den besten visuellen Genuss erleben k?nnen.
Wie erstelle ich mit CSS3 und SVG eine Wellenform mit Rand?
13 Nov 2024
Wellenform mit Rand mit CSS3 und SVGDie Implementierung einer Wellenform mit CSS3 kann eine Herausforderung sein. W?hrend CSS3-Formen eine gro?e Auswahl bieten ...
Wie erstelle ich eine CSS3-Wellenform mit einem Rand?
17 Nov 2024
CSS3-Wellenform mit Rand: Bei dieser Abfrage m?chte der Benutzer mithilfe von CSS3 eine Wellenform mit einem Rand erstellen. Trotz des Versuchs, CSS3-Formen zu verwenden, ...
Wie erstelle ich Trapeze mit CSS3-3D-Transformationen?
07 Nov 2024
Zeichnen von Trapezen mit CSS3 Das in der Frage erw?hnte ?Trapez“ bezieht sich im Wesentlichen auf eine Trapezform. Das Zeichnen solcher Formen in CSS3 hat ...
Wie starte ich CSS3-Animationen mit Reflow neu?
15 Dec 2024
CSS3-Animationen neu startenDas Wiederbeleben von CSS3-Animationen bei Benutzerinteraktion ist eine h?ufige Aufgabe. Beim Entfernen und erneuten Einfügen des animierten Elements kann es vorkommen, dass ...
Wie kann ich Callback-Funktionen mit CSS3-Animationen ausl?sen?
27 Nov 2024
Callbacks für CSS3-Animationen verwenden Im Bereich der Webentwicklung stellt sich die Frage: K?nnen CSS3-Animationen Callback-Funktionen ausl?sen? W?hrend...
Wie kann ich mit CSS3-überg?ngen einen Ausblendeffekt erzeugen?
28 Oct 2024
CSS3-überg?nge: Erzielen von AusblendeffektenIn CSS3 bieten überg?nge ein leistungsstarkes Werkzeug zum Erstellen dynamischer visueller Effekte. Zu diesen Effekten geh?rt...
Wie erstelle ich mit CSS3 Dreiecksformen mit Hintergrundbildern?
11 Nov 2024
Dreiecksform mit Hintergrundbild: Ein CSS3-Ansatz Ihr Ziel, zwei Dreiecke mit Hintergrundbildern zu erstellen, die als Links fungieren, ist erreichbar ...
So drehen Sie Elemente in IE9 mit CSS3 Transform: rotation; ?
10 Nov 2024
CSS3 drehen: drehen; Transformieren im IE9Kompatibilit?tsprobleme treten h?ufig auf, wenn man versucht, CSS3-Eigenschaften in verschiedenen ... zu verwenden.
Hei?e Werkzeuge
CSS-Text wird zu einem herzf?rmigen Animationsspezialeffekt kombiniert
CSS-Text wird zu einem herzf?rmigen Animationsspezialeffekt kombiniert
CSS3 SVG-Ausdruck, Blumenanimation, Spezialeffekte
Der SS3 SVG-Spezialeffekt ?Gest?ndnisblumen-Animation“ ist ein Spezialeffekt für die Valentinstag-Animation.
CSS-Websites für Einkaufszentren verwenden h?ufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
CSS-Websites für Einkaufszentren verwenden h?ufig den Code für das Dropdown-Navigationsmenü der linken Kategorie
jQuery+CSS3 Valentinstag-Liebeseffekt
jQuery+CSS3 Der Valentinstag-Liebesspezialeffekt ist ein h?ngender, schwingender Herzanimations-Spezialeffekt zum Valentinstag.
CSS3-L?ffel sch?pft klebrige Reisb?llchen mit Spezialeffekten
Eine Schüssel mit sü?em Klebreisb?llchen-Ausdruck, ein L?ffel, der eine Klebreisb?llchen-Animation mit Spezialeffekten aufnimmt