Macht geschmeidig animiert gestreift div
Ich bin Schwierigkeiten bei der Herstellung eines nahtlos animierten gestreift, div, wie ein Fortschrittsbalken.
CSS:
.animationStripes{
width: 300px;
height: 50px;
background-image: repeating-linear-gradient(-45deg, rgb(0, 0, 0), rgb(0, 0, 0) 25px, blue 25px, blue 50px);
-webkit-animation:progress 2s linear infinite;
-moz-animation:progress 2s linear infinite;
-ms-animation:progress 2s linear infinite;
animation:progress 2s linear infinite;
}
@keyframes progress{
0% {
background-position: 0 0;
}
100% {
background-position: -70px 0px;
}
}
http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview
Das problem ist, dass es eine seltsame Versatz auf der rechten Seite das Hintergrundbild Farbverlauf. Wie kann ich das korrigieren dieser Fehlausrichtung?
- Wie über das ändern der
width
des Elements zu283px
?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie gesehen, dieses tutorial auf CSS-Tricks?
CSS:
HTML:
Nun habe ich es geschafft, es zu beheben nur, indem man eine Sache und machen keine änderungen an meinem ursprünglichen code. Einfach hinzufügen
background-size: 150% 100%;
hielt das Bild von clipping unbeholfen auf der rechten Seite.http://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview
Machen die linearen Verlauf mit Prozent-Werten, nicht mit Pixeln. gelten die hintergrund-Größe, in deinem Fall würde ich sagen, dass
background-size:50px 50px;
und in keyframes verschieben Sie den hintergrund so viel, wie ist der hintergrund Größebackground-position: -50px 0px;
Auch ein Beispiel
http://plnkr.co/edit/HrSxkhYZaWp81fAQEaJn?p=preview
Wenn die Antwort dir ZUSAGT, dann markiere es als beantwortet und einen schönen Tag noch 🙂