Ich versuche ein Hintergrundbild zu animieren, so dass das Bild von rechts nach links erscheint. Ich habe ein Bild verwendet, das eine größere Breite hat als der Div-Container, in dem sich der Hintergrund befindet. Beim Start ist der Hintergrund folgender:
%Vor%Wenn die Seite geladen ist, möchte ich, dass der Hintergrund animiert wird, so dass er links positioniert ist. Dies sollte ein z. 2 Sekunden und sollte nur einmal durchgeführt werden. (Das Bild sollte danach links liegen.)
Ich möchte keine Mausereignisse oder Pseudoklassen verwenden. Gibt es eine Möglichkeit, es zu animieren, indem Sie nur CSS verwenden? Ich habe versucht, eine Lösung mit Keyframes ohne Erfolg zu finden.
Sie könnten versuchen, this tutorial : CSS-Hintergrundanimation
Beispiel hier : Ссылка
Hoffe es, dass was du brauchst)
Arbeitslink: Ссылка
Das ist ein unorthodoxer Trick.
%Vor%style.css:
%Vor% Was hier passiert, ist zunächst das CSS, das in <style> steht.
später da das externe Stylesheet im Body kurz vor </body> ist.
So wird style.css geladen, nachdem die Ressourcen im geladen wurden. Es gibt also eine Verzögerung bei der Implementierung des CSS, was uns erlaubt, einen CSS-Übergang anzuwenden.
KEINE JAVASCRIPT, KEINE VERANSTALTUNGEN, trotzdem bekommen wir, was wir wollen!
Sie haben Jquery getaggt. Sie erhalten dafür die Jquery-Funktion.
%Vor%Für die Klasse:
%Vor%Sie können Ihren Wert von "Left" ändern. zu der Position, die Sie geben möchten.
setze position:relative; auf das Bild mit left:50%; und document.ready event reduziere den linken Wert auf z. 0 mit jquery animate.
Besuche diese Geige
Tags und Links html jquery css background-image background-position