This work by Harald Zigala is licensed under CC BY-NC-SA 4.0
Hier ist eine kurze und eine ausführliche Erklärung:
Kurze Erklärung:
Zeilen 5-9: Hier wird die gesamte Seite formatiert. Der Hintergrund wird schwarz eingestellt, der Seitenrand entfernt, und die Seite wird horizontal und vertikal in der Mitte des Bildschirms zentriert. Die Höhe des Body-Elements wird auf 500 Pixel festgelegt.
Zeilen 11-18: Die CSS-Stile für den Text mit der Klasse "jumping-text" werden definiert. Die Textfarbe ist schwarz, die Schriftgröße beträgt 30 Pixel, und Zeilenumbrüche werden verhindert. Der Text wird als Inline-Block angezeigt, und die "jump"-Animation wird verwendet, um den Text hin und her schwingen zu lassen.
Zeilen 20-27: Die "jump"-Animation wird definiert. Der Text wird von 0% bis 50% der Animation um 50 Pixel nach oben verschoben und dann von 50% bis 100% wieder auf die Ausgangsposition zurückgesetzt.
Ausführliche Erklärung:
Zeilen 5 bis 9: Diese CSS-Stile definieren die Darstellung der gesamten Seite. Der Hintergrund wird auf Schwarz gesetzt, der Seitenrand wird mit "margin: 0" entfernt, und die Seite wird sowohl horizontal als auch vertikal in der Mitte des Bildschirms zentriert. Die Höhe des Body-Elements wird auf 500 Pixel festgelegt. Dies bedeutet, dass die Seite eine feste Höhe von 500 Pixeln hat, unabhängig von der Bildschirmgröße.
Zeilen 11 bis 18: Hier werden die CSS-Stile für den Text definiert, der die Klasse "jumping-text" hat. Die Textfarbe ist auf Schwarz festgelegt, die Schriftgröße beträgt 30 Pixel, und mit "white-space: nowrap" wird sichergestellt, dass es keine Zeilenumbrüche im Text gibt. Der Text wird als Inline-Block dargestellt, was bedeutet, dass er auf derselben Zeile bleibt, aber sich wie ein Blockelement verhält. Die Animation "jump" wird auf den Text angewendet, wodurch der Text hin und her schwingt. Die Animation dauert 2 Sekunden, ist unendlich (wiederholt sich immer) und verwendet die "ease-in-out alternate"-Funktion, um einen sanften Schwingungseffekt zu erzeugen.
Zeilen 20 bis 27: In diesem Abschnitt wird die "jump"-Animation definiert. Sie besteht aus drei Schlüsselbildern (0%, 50%, 100%), die den Zustand des Textes während der Animation beschreiben. Bei 0% befindet sich der Text in seiner ursprünglichen Position, bei 50% wird der Text um 50 Pixel nach oben verschoben (was den Schwingungseffekt erzeugt), und bei 100% kehrt der Text wieder in seine ursprüngliche Position zurück. Dieses Zusammenspiel der Schlüsselbilder erzeugt den springenden Texteffekt.
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow: hidden; /* Verhindert das Scrollen auf der Seite */
background-color: black; /* Hintergrundfarbe auf Schwarz setzen */
margin: 0; /* Entfernt den Seitenrand */
display: flex; /* Verwendet Flexbox zur Zentrierung */
justify-content: center; /* Horizontal zentriert */
align-items: center; /* Vertikal zentriert */
height: 500px; /* Setzt die Höhe des Body-Elements auf 500 Pixel */
}
.jumping-text {
color: black; /* Textfarbe in Weiß ändern (Überschrieben, aber kommentiert) */
font-size: 30px; /* Textgröße auf 30px festlegen */
white-space: nowrap; /* Verhindert Zeilenumbrüche im Text */
display: inline-block; /* Zeigt Text als Inline-Block an */
animation: jump 2s infinite ease-in-out alternate; /* Verwendet die "jump"-Animation */
}
@keyframes jump {
0% {
transform: translateY(0); /* Startposition, keine Translation */
}
50% {
transform: translateY(-50px); /* Halbzeit-Position, Text wird nach oben verschoben */
}
100% {
transform: translateY(0); /* Endposition, Text wird zurückgesetzt */
}
}
</style>
</head>
<body>
<div class="jumping-text">
Text, bei dem die ganze Zeile schwingt ...
<!-- Text, bei dem die gesamte Zeile hin und her schwingt -->
</div>
</body>
</html>