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
Umfassende Analyse der Isolationsebenen in MySQL
Wenn die Datenbank gleichzeitig denselben Datenst...
Die Architektur und Praxis der Synchronisierung von Meituan DB-Daten mit dem Data Warehouse
Hintergrund Bei der Data-Warehouse-Modellierung w...
Zusammenfassung von fünf Befehlen zum Überprüfen des Swap-Speichers in Linux
Vorwort Unter Linux können zwei Arten von Swap-Sp...
Natives JavaScript zur Implementierung einer zufälligen Namensaufruftabelle
In diesem Artikelbeispiel wird der spezifische Co...
Lösen Sie das Problem, dass die Methoden der document.getElementBy-Reihe keine Objekte abrufen können
getElementById kann das Objekt nicht abrufen Beim...
Über gutes Design
<br />Auf zehntausend Personen, die die Frag...
Vier Möglichkeiten, CSS und HTML zu kombinieren
(1) Jedes HTML-Tag hat ein Attribut style, das CS...
Docker richtet Port-Mapping ein, kann aber nicht auf die Lösung zugreifen
#docker ps-Check, alle Ports sind zugeordnet CONT...
React-Beispiel zum Abrufen des Werts aus dem Eingabefeld
Reagieren Sie auf mehrere Arten, um den Wert des ...
Detaillierte Erklärung der Vue px-zu-rem-Konfiguration
Inhaltsverzeichnis Methode 1 1. Konfigurations- u...
js realisiert die nicht auswählbare Dropdown-Box-Version der dreistufigen Verknüpfung von Provinzen, Städten und Bezirken
Ich habe im Internet nach dreistufigen Verknüpfun...
So fügen Sie einem Feld in MySQL eine Standardzeit hinzu
Unterschiede und Verwendungen von Datumstypen MyS...
Detaillierte Erklärung zur Interpretation der Nginx-Konfigurationsdatei
Die Nginx-Konfigurationsdatei ist hauptsächlich i...
Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0
Inhaltsverzeichnis 1. Was ist der Nutzen von Prov...
Sind die Wertebereiche von int(3) und int(10) in MySQL gleich?
Inhaltsverzeichnis Frage: Antwort: Wirklichkeit: ...