Animieren Sie ein Div-Hintergrundbild
Posted: 12 Jan 2025, 15:45
Ich habe ein Bild in einem Div mit
Das ist ziemlich groß.
Ich möchte etwas Bewegung in das Hintergrundbild bringen. Ich möchte also ein wenig hineinzoomen und etwas übersetzen, damit es so aussieht, als würde sich das Bild ein wenig bewegen.
Ich möchte, dass es in einer Endlosschleife läuft.
Ich habe versucht, Animate.css mit zu verwenden, aber ich möchte nicht, dass sich das Div bewegt , nur das Hintergrundfoto innerhalb des div. Auch der Pulseffekt ist etwas zu stark. Ich möchte nur, dass es ein wenig Bewegung hat. Vielleicht einfach in x-Richtung nach links und dann nach rechts verschieben
Bearbeiten
Ich habe es versucht< /p>
aber es scheint nicht zu funktionieren, wenn ich „background-size: cover“ verwende?
Bearbeiten 2
Ich habe herausgefunden, dass es funktioniert, aber die Breite beträgt 100 %, also macht es keinen Unterschied, wenn ich „background-position: 50 % 22 %“ verwende. ; oder Hintergrundposition: 100 % 22%;, aber wenn ich die y-Richtung ändere, funktioniert es
Aber wenn ich die Animationszeit auf mehr als 5 Sekunden stelle , es wird sehr verzögert. Gibt es eine Möglichkeit, die Verzögerung zu vermeiden?
Code: Select all
Ich möchte etwas Bewegung in das Hintergrundbild bringen. Ich möchte also ein wenig hineinzoomen und etwas übersetzen, damit es so aussieht, als würde sich das Bild ein wenig bewegen.
Ich möchte, dass es in einer Endlosschleife läuft.
Ich habe versucht, Animate.css mit zu verwenden, aber ich möchte nicht, dass sich das Div bewegt , nur das Hintergrundfoto innerhalb des div. Auch der Pulseffekt ist etwas zu stark. Ich möchte nur, dass es ein wenig Bewegung hat. Vielleicht einfach in x-Richtung nach links und dann nach rechts verschieben
Bearbeiten
Ich habe es versucht< /p>
Code: Select all
@keyframes animatedBackground {
from {
background-size: cover;
background-position: 50% 22%;
}
to {
background-size: cover;
background-position: 100% 22%;
}
}
Bearbeiten 2
Ich habe herausgefunden, dass es funktioniert, aber die Breite beträgt 100 %, also macht es keinen Unterschied, wenn ich „background-position: 50 % 22 %“ verwende. ; oder Hintergrundposition: 100 % 22%;, aber wenn ich die y-Richtung ändere, funktioniert es
Aber wenn ich die Animationszeit auf mehr als 5 Sekunden stelle , es wird sehr verzögert. Gibt es eine Möglichkeit, die Verzögerung zu vermeiden?