CSS3 realisiert eine springende Ballanimation

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!

<<:  Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu

>>:  Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx

Artikel empfehlen

Gründe, warum MySQL-Abfragen langsam sind

Inhaltsverzeichnis 1. Wo ist die Langsamkeit? 2. ...

Implementierung der Zahlungsfunktion im Vue-Projekt (WeChat-Zahlung und Alipay-Zahlung)

Inhaltsverzeichnis Gängige Zahlungsarten in Proje...

MySQL-Optimierung: InnoDB-Optimierung

Lernpläne werden leicht unterbrochen und es ist s...

Implementierung der Validierungsregel für Vue Element-ui-Formulare

Inhaltsverzeichnis 1. Einleitung 2. Eingabemodus ...

Verstehen Sie die Verwendung des All-Attributs von CSS3

1. Kompatibilität Wie unten dargestellt: Die Komp...

Zusammenfassung der zwölf Methoden der Vue-Wertübertragung

Inhaltsverzeichnis 1. Vom Vater zum Sohn 2. Vom S...

Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework

Ich habe kürzlich Bootstrap zum Entwickeln einer ...

JS implementiert die Append-Funktion von jQuery

Inhaltsverzeichnis Zeig mir den Code Testen Sie d...

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Fehlermeldung: FEHLER 2002: Verbindung zum lokale...

Fünf Lösungen für Cross-Browser-Probleme (Zusammenfassung)

Kurz zusammengefasst: Browserkompatibilitätsprobl...

Beispiele für die Verwendung des ES6-Spread-Operators

Inhaltsverzeichnis Was sind Spread- und Rest-Oper...

Eine kurze Analyse des Unterschieds zwischen und und wo in der MySQL-Verbindungsabfrage

1. Erstellen Sie eine Tabelle CREATE TABLE `stude...

Eine kurze Erläuterung der Concat-Funktion in MySQL. So fügen Sie in MySQL vor oder nach einem Feld eine Zeichenfolge hinzu

So verwenden Sie die Concat-Funktion in MySQL: CO...

Detailliertes Tutorial zur Installation von CentOS, JDK und Hadoop auf VirtualBox

Inhaltsverzeichnis 1. Voraussetzungen 1.1 Unterst...

Detaillierte Erklärung und klassische Interviewfragen zum Vue-Lebenszyklus und zu Hook-Funktionen

Inhaltsverzeichnis 1. Vue-Lebenszyklus 2. Hook-Fu...