CSS Hintergrundanimation

Question

Ich brauche diese Animation als Hintergrund zu machen: https://www.dropbox.com/s/yu1kot89f05ybgn/Comp%201_10.mov?dl=0

Ich habe versucht, es mit dem Bild zu tun:

background-image url('../images/content/fracture.png') 
animation background-moving linear 10s infinite; 

Aber Animation von Video ist komplizierter.

Welche Technologie sollte hier verwendet werden? (CSS, SVG-Animation ...)? Oder bitte geben Sie einige Beispiele.

Answer 1

Ich möchte Ihnen basierend auf meiner Erfahrung einige Optionen geben.

• Haben Sie einen GIF file und den Hintergrund (am einfachsten)
• Holen Sie sich ein PNG/SVG mit 3 Hügeln, fügen Sie den Hintergrund animieren basierend auf CSS animation & CSS transition (Werke)
• einfach ein Video hinzufügen, basierend auf HTML5 video Stichworte. Viele Websites tun das. (Aber, bezogen auf das Video, das Sie gemeinsam, das ist nicht notwendig.)
• Haben Sie eine Leinwand als Hintergrund & Schreib JavaScript, die den Übergang Schleifen (Komplex)