CSS3 realisiert eine springende Ballanimation
|
Normalerweise besuche ich gerne die Sonderseiten oder Produktveröffentlichungsseiten großer Websites, da ich dort viele coole Seiteneffekte sehen kann. Das Material für diesen Fall stammt von der Release-Seite des Baidu-Browsers, und der nächste Fall „Chameleon-Animation“ stammt ebenfalls vom Baidu-Browser. Obwohl ich ein treuer Nutzer von Google Chrome bin, muss ich sagen, dass die Spezialseiten und Produkt-Release-Seiten bekannter Markenwebsites in der heimischen Internetbranche alle ihr Bestes gegeben haben, um die Seiten cool aussehen zu lassen. Der entscheidende Punkt in diesem Fall liegt im Rhythmus des Aufpralls des Balls und der Layout-Positionierung.
1. Fallwissenspunkte 1. Relative und absolute Positionierung 2. Mehrere Animationswarteschlangen 2. Hauptcode 1. HTML-Code
<div id="wrap">
<div Klasse="tu1"><img src="images/1.png" /></div>
<div Klasse="tu2"><img src="images/2.png" /></div>
<div Klasse="tu3"><img src="images/3.png" /></div>
</div>2. CSS-Teil des Codes
#wickeln{
Position: absolut;
links: 0;
rechts:0;
oben: 0;
unten: 0;
Breite: 580px;
Höhe: 143px;
Rand: automatisch;
}
#wrap img{
Breite: 160px;
}
#div umbrechen{
schweben: links;
Rand rechts: 50px;}
#wrap div:letztes-Kind{
Rand rechts: 0;}
.tu1,.tu2,.tu3{
Position: absolut;
links: 50 %;
Rand links: -80px;
}
.tu1{
z-Index: 1;
Animation: tiantiao1 0,5 s Einfahren 1 vorwärts, tiantiao2 0,2 s Ausfahren 0,5 s 1 vorwärts, tiantiao3 0,2 s Einfahren 0,7 s 1 vorwärts, tiantiao4 0,15 s Ausfahren 0,9 s 1 vorwärts, tiantiao5 0,15 s Einfahren 1,05 s 1 vorwärts, Linksbewegung 0,4 s Ausfahren 1,2 s 1 vorwärts, Drehen 1 s linear 1,6 s unendlich;
}
.tu2{
z-Index: 2;
Animation: tiantiao1 0,5 s Einfahren 1 vorwärts, tiantiao2 0,2 s Ausfahren 0,5 s 1 vorwärts, tiantiao3 0,2 s Einfahren 0,7 s 1 vorwärts, tiantiao4 0,15 s Ausfahren 0,9 s 1 vorwärts, tiantiao5 0,15 s Einfahren 1,05 s 1 vorwärts, Mitte 0,4 s Ausfahren 1,2 s 1 vorwärts;
}
.tu3{
z-Index: 3;
Animation: tiantiao1 0,5 s Einfahren 1 vorwärts, tiantiao2 0,2 s Ausfahren 0,5 s 1 vorwärts, tiantiao3 0,2 s Einfahren 0,7 s 1 vorwärts, tiantiao4 0,15 s Ausfahren 0,9 s 1 vorwärts, tiantiao5 0,15 s Einfahren 1,05 s 1 vorwärts, rightMove 0,4 s Ausfahren 1,2 s 1 vorwärts;
}
@keyframes tiantiao1{
0 %{
transformieren: übersetzenY(-500px);
}
100 %{
transformieren:übersetzenY(0);}
}
@keyframes tiantiao2{
0 %{
transformieren:übersetzenY(0);}
100 %{
transformieren: übersetzenY(-100px);}}
@keyframes tiantiao3{
0 %{
transformieren: übersetzenY(-100px);}
100 %{
transformieren:übersetzenY(0);}}
@keyframes tiantiao4{
0 %{
transformieren: übersetzenY(0px);}
100 %{
transformieren: übersetzenY(-50px);}}
@keyframes tiantiao5{
0 %{
transformieren: übersetzenY(-50px);}
100 %{
transformieren:übersetzenY(0);}
}
@keyframes leftMove{
0 %{
transformieren:übersetzenX(0);}
100 %{
transform:translateX(-300px) Maßstab(1,6);
}}
@keyframes rightMove{
0 %{
transformieren:übersetzenX(0);}
100 %{
transform:translateX(300px) Maßstab(1,6);
}}
@keyframes Mitte{
0 %{
transformieren:übersetzenX(0);
}
100 %{
transformieren: übersetzenX(0) Skala(1,6);
}}Achten Sie bei Animationen in mehreren Warteschlangen auf die Animationsverzögerung. Die Animation der nächsten Warteschlange wird erst ausgeführt, nachdem die Animation der vorherigen Warteschlange abgeschlossen ist. Vollständiger Seitencode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Animation von nacheinander fallenden Bällen</title>
<style type="text/css">
Körper, Div, Fußzeile, p {
Rand: 0;
Polsterung: 0;}
Körper{
Schriftart:1em „Microsoft Yahei“;
Hintergrundfarbe:#eee;}
#wickeln{
Position: absolut;
links: 0;
rechts:0;
oben: 0;
unten: 0;
Breite: 580px;
Höhe: 143px;
Rand: automatisch;
}
#wrap img{
Breite: 160px;
}
#div umbrechen{
schweben: links;
Rand rechts: 50px;}
#wrap div:letztes-Kind{
Rand rechts: 0;}
.tu1,.tu2,.tu3{
Position: absolut;
links: 50 %;
Rand links: -80px;
}
.tu1{
z-Index: 1;
Animation: tiantiao1 0,5 s Einfahren 1 vorwärts, tiantiao2 0,2 s Ausfahren 0,5 s 1 vorwärts, tiantiao3 0,2 s Einfahren 0,7 s 1 vorwärts, tiantiao4 0,15 s Ausfahren 0,9 s 1 vorwärts, tiantiao5 0,15 s Einfahren 1,05 s 1 vorwärts, Linksbewegung 0,4 s Ausfahren 1,2 s 1 vorwärts, Drehen 1 s linear 1,6 s unendlich;
}
.tu2{
z-Index: 2;
Animation: tiantiao1 0,5 s Einfahren 1 vorwärts, tiantiao2 0,2 s Ausfahren 0,5 s 1 vorwärts, tiantiao3 0,2 s Einfahren 0,7 s 1 vorwärts, tiantiao4 0,15 s Ausfahren 0,9 s 1 vorwärts, tiantiao5 0,15 s Einfahren 1,05 s 1 vorwärts, Mitte 0,4 s Ausfahren 1,2 s 1 vorwärts;
}
.tu3{
z-Index: 3;
Animation: tiantiao1 0,5 s Einfahren 1 vorwärts, tiantiao2 0,2 s Ausfahren 0,5 s 1 vorwärts, tiantiao3 0,2 s Einfahren 0,7 s 1 vorwärts, tiantiao4 0,15 s Ausfahren 0,9 s 1 vorwärts, tiantiao5 0,15 s Einfahren 1,05 s 1 vorwärts, rightMove 0,4 s Ausfahren 1,2 s 1 vorwärts;}
Fußzeile{
Position: absolut;
unten: 20px;
links: 50 %;
Rand links: -104px;
}
Fußzeile
Textausrichtung: zentriert;
Rand unten:.7em;}
Fußzeile a{
Farbe: Nr. 666;
Textdekoration: keine;}
Fußzeile a:hover{
Farbe: #333;}
@keyframes tiantiao1{
0 %{
transformieren: übersetzenY(-500px);
}
100 %{
transformieren:übersetzenY(0);}
}
@keyframes tiantiao2{
0 %{
transformieren:übersetzenY(0);}
100 %{
transformieren: übersetzenY(-100px);}}
@keyframes tiantiao3{
0 %{
transformieren: übersetzenY(-100px);}
100 %{
transformieren:übersetzenY(0);}}
@keyframes tiantiao4{
0 %{
transformieren: übersetzenY(0px);}
100 %{
transformieren: übersetzenY(-50px);}}
@keyframes tiantiao5{
0 %{
transformieren: übersetzenY(-50px);}
100 %{
transformieren:übersetzenY(0);}
}
@keyframes leftMove{
0 %{
transformieren:übersetzenX(0);}
100 %{
transform:translateX(-300px) Maßstab(1,6);
}}
@keyframes rightMove{
0 %{
transformieren:übersetzenX(0);}
100 %{
transform:translateX(300px) Maßstab(1,6);
}}
@keyframes Mitte{
0 %{
transformieren:übersetzenX(0);
}
100 %{
transformieren: übersetzenX(0) Skala(1,6);
}}
</Stil>
</Kopf>
<Text>
<div id="wrap">
<div Klasse="tu1"><img src="images/1.png" /></div>
<div Klasse="tu2"><img src="images/2.png" /></div>
<div Klasse="tu3"><img src="images/3.png" /></div>
</div>
<Fußzeile>
<p>123WORDPRESS.COM</p>
<p><a href="https://www.jb51.net" target="_blank">www.jb51.net</a></p>
</Fußzeile>
</body>
</html>
Oben finden Sie Einzelheiten zur Implementierung einer hüpfenden Ballanimation mit CSS3. Weitere Informationen zur Implementierung einer elastischen Ballanimation mit CSS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
>>: Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx
Artikel empfehlen
So konfigurieren Sie den NAT-Modus für virtuelle VMware-Maschinen
In diesem Artikel wird der NAT-Konfigurationsproz...
Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen
Vor kurzem wurde WeChat von Apple gezwungen, eine...
Eine vollständige Anleitung zum Löschen von Floats in CSS (Zusammenfassung)
1. Übergeordnetes Div definiert Pseudoklassen: af...
Mit CSS3 implementierte Text-Popup-Effekte
Ergebnisse erzielenImplementierungscode html <...
vue verwendet Ele.me UI, um die Filterfunktion von Teambition zu imitieren
Inhaltsverzeichnis Problembeschreibung Die allgem...
Ein MySQL-Migrationsplan und eine praktische Auflistung der Fallstricke
Inhaltsverzeichnis Hintergrund Lösung 1: Alte Dat...
Zehn beliebte Regeln für das Interface-Design
<br />Dies ist ein Artikel, den ich vor lang...
Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen
Inhaltsverzeichnis 1. Vorbereitung Ziehen Sie das...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
Vertikales und horizontales Aufteilen von MySQL-Tabellen
Vertikale Teilung Vertikale Aufteilung bezieht si...
Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS
OBS studio ist cool, aber JavaScript ist cooler. ...
MySQL-langsame Abfrage pt-query-digest Analyse des langsamen Abfrageprotokolls
1. Einleitung pt-query-digest ist ein Tool zum An...
Detaillierte Erklärung der Ansichtszusammenfassungsdefinition im Angular-Framework
Vorwort Als Front-End-Framework, das „für große F...
Einrichten eines globalen Shadowsocks+Polipo-Proxys in einer Linux-Umgebung
1. Installieren Sie Shadowsocks sudo apt-get inst...
So konfigurieren Sie einen Pfadalias für das React-Scaffolding
Die React-Version beim Schreiben dieses Artikels ...