Ich möchte meinen Farbverlauf mit mehreren Farben glatt verschieben, aber das Problem ist, dass die Animation nicht glatt ist. Es ändert nur bei jedem Schritt seine Position.
Nun, ich denke, Sie möchten Ihre Demo vielleicht auf IE 11 ausprobieren (bei IE 10 bin ich mir nicht sicher), es funktioniert wie erwartet. Alle anderen Browser unterstützen derzeit keine Hintergrundanimation, stattdessen können Sie versuchen, die zu animieren background-positionaber Natürlich hat dies nicht alle Effekte, wenn der gesamte Hintergrund animiert wird.
– König König
3. Mai 2014 um 6:33 Uhr
Beantwortet das deine Frage? Verwenden Sie CSS3-Übergänge mit Farbverlaufshintergründen
Zu Ihrer Information, Verlaufsübergänge funktionieren noch nicht in Firefox oder Safari, was bedeutet, dass sie auch nicht auf iPhones und iPads funktionieren.
Stellen Sie den Körperrand und die Polsterung auf 0 ein. Stellen Sie eine HTML-Regel auf 100 % Höhe ein (höher als 100 % kann erforderlich sein).
Stellen Sie den Körper auf den Endzustand für den Farbverlauf ein.
Erstellen Sie ein leeres div mit einem Hintergrund, der den Startzustand für den Farbverlauf darstellt. Geben Sie dem leeren div 100 % Höhe.
Geben Sie sowohl dem Körper als auch dem leeren div einen Hintergrundanhang: fixed;
Erstellen Sie einen Wrapper für Ihren Textinhalt.
Setzen Sie das leere div auf position: fixed; Setzen Sie den Wrapper auf position: relative; Geben Sie beiden einen Z-Index, wobei der Wrapper höher ist.
Erstellen Sie eine Animation, die die Deckkraft des leeren Div über die gewünschte Zeit von 1 auf 0 ändert. Animationsfüllmodus hinzufügen: vorwärts; an die div-Regel, damit die Animation dort bleibt, wo sie endet.
Es ist nicht so sexy wie eine echte animierte Farbverlaufsverschiebung, aber es ist so einfach, wie Sie es nur mit CSS und Keyframes bekommen können, denke ich.
Dmitri Babich
Hier ist ein anderer Weg. Das Folgende hat den statischen Gradienten, der alle Phasen der Animation enthält, die dann in das äußere Element verschoben wird. Dies ermöglicht eine reibungslose Animation (wie das Thema andeutet), da die einzige Animation hier die Elementposition ist.
Bitte beachten Sie, dass aus Performancegründen das Gradientenelement unverändert gelassen wird. Obwohl es darum ging, den Farbverlauf zu animieren, bewirkt das Verschieben des Hintergrunds praktisch dasselbe, während die Leistung gewinnt!
Nun, ich denke, Sie möchten Ihre Demo vielleicht auf IE 11 ausprobieren (bei IE 10 bin ich mir nicht sicher), es funktioniert wie erwartet. Alle anderen Browser unterstützen derzeit keine Hintergrundanimation, stattdessen können Sie versuchen, die zu animieren
background-position
aber Natürlich hat dies nicht alle Effekte, wenn der gesamte Hintergrund animiert wird.– König König
3. Mai 2014 um 6:33 Uhr
Beantwortet das deine Frage? Verwenden Sie CSS3-Übergänge mit Farbverlaufshintergründen
– Mahozad
15. Mai um 7:08 Uhr