Implementieren Sie einfache Animationseffekte mit CSS

In den letzten Tagen muss das Unternehmen eine mobile Webseite aktualisieren. Da die Aufgabe einfach ist, werde ich es als Neuling tun. Das erste Mal kam ich mit CSS in Kontakt, als ich 2014 im ersten Studienjahr war und es mit HTML studierte, und ich kam nie wieder damit in Kontakt. Also musste ich die Aufgabe gleichzeitig studieren und erledigen (⊙﹏⊙)b

Struktur: Erstellen Sie einen Ordner mit dem Namen „main“ im WebContent-Verzeichnis im Java-Webprojekt und erstellen Sie dann zwei Unterordner in Der Ordner „CSS“ (zum Speichern von CSS-Dateien), „IMG“ (zum Speichern von Bildern) und die HTML-Dateien werden im Hauptordner abgelegt.

Vergessen Sie nicht, in der HTML-Datei ... " type="text/css">, sonst kann der CSS-Stil nicht geladen werden.

Das Gesamtlayout in CSS ist nicht interessant zu schreiben, also reden wir über die Animationseinstellungen

.logo{
		            position: absolute;
			    width: 86%;
			    left: 6%;
			    height: 33%;
			    z-index: 3;
			    top: 50%;
			    background: url(../img/test.png) no-repeat top center;
			    background-size: contain;
			    animation: bounceInUp .7s ease 0s normal both;
			    -moz-animation: bounceInUp .7s ease 0s normal both;
			    -webkit-animation: bounceInUp .7s ease 0s  normal both;
			    -o-animation:  bounceInUp .7s ease 0s normal both;
			}
			section.active .logo{
				animation: bounceInUp .7s ease 0s normal both;
				-moz-animation: bounceInUp .7s ease 0s normal both;
				-webkit-animation: bounceInUp .7s ease 0s  normal both;
				-o-animation:  bounceInUp .7s ease 0s normal both;
			}
			
			@keyframes bounceInUp
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			
			@-webkit-keyframes bounceInUp  /* Safari 鍜� Chrome */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			@-moz-keyframes bounceInUp /* Firefox */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}
			
			@-o-keyframes bounceInUp /* bounceInUp */
			{
			0% {top: -30%;}
			40%{top: 55%;}
			60%{top: 30%;}
			80%{top: 45%;}
			100% {top: 50%;}
			}

.logo{...} enthält alle von einem bestimmten Der relevante CSS-Stil des Bildes,

Das Positionsattribut wird verwendet, um den Positionierungstyp des Elements anzugeben, und der absolute Wert dient zur Generierung eines absolut positionierten Elements

Breite und Höhe dienen dazu, die Breite und Höhe des Bildes festzulegen. Es ist zu beachten, dass das Bild selbst das Element nicht erweitert (/right) wird verwendet, um das Bild und den linken Rand (/right border) anzugeben.

　Der Z-Index wird verwendet, um die Reihenfolge anzugeben, in der die Bilder gestapelt werden. Je größer der Wert dahinter ist, desto mehr wird das Bild vorne angezeigt (dh es wird nicht von anderen Bildern verdeckt). 🎜>

top gibt den Abstand vom oberen Rand an; background:url(../img/2.png); gibt den Pfad des verwendeten Bildes an >;background-repeat: Das Attribut gibt an, ob das Bild im Allgemeinen wiederholt werden soll. Der Standardwert ist „no-repeat“, also keine Wiederholung

Das Attribut „background-size“ legt die Größe des Bildhintergrunds fest

Die letzten vier Sätze in .logo{...} sind korrekt. Für die Einstellung der Bildanimation benötigen wir hier ein gewisses Verständnis der Syntax des Animationsattributs:

Das obige ist der detaillierte Inhalt vonImplementieren Sie einfache Animationseffekte mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!