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
CSS- und HTML- und Front-End-Technologie-Schichtendiagramm
Die Beziehung zwischen Javascript und DOM ist seh...
Perfekte Lösung für asynchrone Timeout-Vorgänge im JavaScript-Frontend
Inhaltsverzeichnis Was passiert, wenn die Ausführ...
Hyperlink-Tag für HTML-Webseiten
Lernprogramm zum Hyperlink-Tag einer HTML-Webseit...
Centos8 erstellt NFS basierend auf KDC-Verschlüsselung
Inhaltsverzeichnis Konfiguration NFS-Server (nfs....
Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server
Da die Standardparameter des Linux-Kernels auf de...
Webseiten-Erlebnis: Farbabstimmung für Webseiten
<br />Die Farbe einer Webseite ist entscheid...
Verstehen Sie die Grundlagen von Navicat für MySQL in einem Artikel
Inhaltsverzeichnis 1. Datenbankbetrieb 2. Datenty...
Über das Problem der Offline-Installation des Docker-Pakets unter CentOS 8.4
Die verwendete virtuelle Maschine ist CentOS 8.4,...
Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?
Programmierer müssen sich viel mit MySQL befassen...
Detaillierte Erläuterung zur Lösung des Konflikts von Projekt-URLs, der durch das Festlegen des Standardpfads von Tomcat verursacht wird
Vorwort Tomcat ist ein hervorragender Java-Contai...
MySQL-Konvertierung von Spalten in Zeilen, Methode zum Zusammenführen von Feldern (unbedingt lesen)
Datenblatt: Von Spalte zu Zeile: mit max(case whe...
So überwachen Sie MySQL mit Zabbix
Dokumentation zur Zabbix-Bereitstellung Nach der ...
Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript
Inhaltsverzeichnis Vorwort Schnittstelle Typ Anha...
Detaillierte Erklärung der Lösung zur Migration von Antd+React-Projekten nach Vite
Antd+React+Webpack ist häufig die Standardkombina...
Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL
Als ich MySQL konfiguriert habe, habe ich die Sta...