2016-04-24 46 views
1

Lassen Sie sich sagen, ich habe einen mir wiederholenden Hintergrund von pic.png, wie so ...Wie kann man den Hintergrund unendlich bewegen?

body { 
    background-image: url(pic.png); 
} 

Ich mag es nahtlos in einer bestimmten Richtung bewegen machen, sagt Nordosten mit einer bestimmten Geschwindigkeit, unendlich. Ich habe gesehen, w3 schools mit animieren, aber das verlangsamt allmählich und beschleunigt, ganz zu schweigen von hin und her zu bewegen.

Noch eine Sache, (ich denke es automatisch tut, aber ich werde es erklären), wenn es sich bewegt, will ich nicht die Leerheit von Leerraum sehen, ich möchte den Hintergrund mit ihm wiederholen zu sehen wie es sich bewegt.

+0

@MichaelSchwartz Hast du auch lesen * * was zu diesem Link ist Ihnen zur Verfügung gestellt. Obwohl MDN bevorzugt werden sollte, ist w3schools nicht mehr das * komplette * Chaos, das es zuvor war. –

Antwort

0

Was Sie brauchen, ist im Grunde, was Sie verknüpft haben. Sie benötigen ein Musterbild und machen dann die unendliche Animation, aber verschieben Sie den Hintergrund so viele Pixel wie die Abmessungen des Bildes bei Schlüsselbild 100%.

Wenn Ihr Bild ist 32x32px und Sie wollen es nach oben und rechts:

@keyframes mymove { 
    100% {background-position: 32px -32px;} 
} 

Sie werden auch die Lockerung setzen wollen die Verzögerung zu verhindern linear:

animation-timing-function: linear; 
2

Weave :http://kodeweave.sourceforge.net/editor/#55eb58488c64b5c4ef5b25a64a8c4f3b

Einfach! Richten Sie Ihren Hintergrund ein und geben Sie ihm eine animation property.

body { 
    background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png"); 
    background-size: 261px; 
    animation: moveIt 10s linear infinite; 
} 

animation: moveIt 10s linear infinite;

ich meine Keyframe-Funktion MOVEit benannt.
Die Verzögerung der Funktion beträgt 10 Sekunden.
Es gibt viele Werte, die Sie für die animation-timing-function übergeben können, ich setze nur meine auf linear, so bleibt meine Animation stabil. So wird am Ende nicht schneller oder langsamer.

Dann in Ihrer Keyframe-Funktion Sie geben einen Namen und legen Sie, wo und wie

Jetzt Keyframe Funktionen to, from oder entweder Prozent%, indem arbeiten.

In diesem Fall bin ich mit to und from obwohl 0% und 100% würde auch perfekt funktionieren.

@keyframes moveIt { 
    from {background-position: bottom left;} 
    to {background-position: top right;} 
} 

HINWEIS: Meine weave Anwendungen Prefix-free auf diese Weise müssen Sie Präfix ist keine Sorgen über Anbieter. Es gibt jedoch auch Autoprefixer, die Sie vielleicht in Erwägung ziehen sollten.

body { 
 
    background-image: url("http://img15.deviantart.net/cafe/i/2012/085/2/8/orange_stripe_background_by_sonnywolfie-d4u0e93.png"); 
 
    background-size: 261px; 
 
    animation: moveIt 10s linear infinite; 
 
} 
 
@keyframes moveIt { 
 
    from {background-position: bottom left;} 
 
    to {background-position: top right;} 
 
}

Verwandte Themen